{{ extends "global/Page.html" }}
{{ block title }}Social Norms Task{{ endblock }}

{{ block content }}

<style>
    /* ── Layout ── */
    .page-wrapper {
        display: flex;
        gap: 28px;
        align-items: flex-start;
        max-width: 1150px;
        margin: 0 auto;
    }
    .form-panel {
        flex: 1 1 0;
        min-width: 0;
    }
    .chat-panel {
        width: 320px;
        flex-shrink: 0;
        position: sticky;
        top: 20px;
    }

    /* ── Task description ── */
    .task-card {
        background: #f8f9fa;
        border-left: 4px solid #4a90d9;
        border-radius: 6px;
        padding: 16px 20px;
        margin-bottom: 24px;
        font-size: 0.95em;
        line-height: 1.6;
    }
    .task-card strong { color: #2c5f9e; }

    /* ── Rating table ── */
    .scale-legend {
        display: flex;
        justify-content: space-between;
        font-size: 0.72em;
        color: #718096;
        padding: 0 0 6px 200px;
        margin-bottom: 2px;
    }

    .rating-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }
    .rating-table thead th {
        padding: 8px 4px;
        text-align: center;
        font-weight: 500;
        font-size: 11px;
        color: #718096;
        border-bottom: 1px solid #e2e8f0;
        line-height: 1.3;
    }
    .rating-table thead th.alloc-col {
        text-align: left;
        min-width: 200px;
        padding-left: 10px;
    }
    .rating-table tbody tr {
        border-bottom: 1px solid #f0f4f8;
        transition: background 0.1s;
    }
    .rating-table tbody tr:hover { background: #f7fafc; }
    .rating-table tbody tr:last-child { border-bottom: none; }
    .rating-table td {
        padding: 9px 4px;
        text-align: center;
        vertical-align: middle;
    }
    .rating-table td.alloc-label {
        text-align: left;
        padding-left: 10px;
        font-size: 12px;
        color: #2d3748;
        line-height: 1.5;
    }
    .alloc-badge {
        display: inline-block;
        background: #edf2f7;
        border-radius: 4px;
        padding: 2px 8px;
        font-size: 11px;
        color: #4a5568;
    }
    .done-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #48bb78;
        margin-left: 7px;
        vertical-align: middle;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .done-dot.visible { opacity: 1; }

    /* ── Radio buttons ── */
    .radio-cell { position: relative; }
    .radio-cell input[type="radio"] { display: none !important; }
    .radio-cell label {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        border: 1.5px solid #cbd5e0 !important;
        cursor: pointer;
        font-size: 11px !important;
        font-weight: 500;
        color: #718096 !important;
        background: #fff !important;
        transition: all 0.12s;
        margin: 0 !important;
        padding: 0 !important;
    }
    .radio-cell label:hover {
        border-color: #4a90d9 !important;
        color: #4a90d9 !important;
        background: #ebf4ff !important;
    }
    .radio-cell input[type="radio"]:checked + label {
        background: #4a90d9 !important;
        border-color: #4a90d9 !important;
        color: #ffffff !important;
    }
    .neutral-col {
        border-left: 1px solid #e2e8f0;
        border-right: 1px solid #e2e8f0;
    }

    /* ── Progress bar ── */
    .progress-wrap {
        margin-top: 16px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .progress-label { font-size: 12px; color: #718096; white-space: nowrap; }
    .progress-track {
        flex: 1;
        height: 5px;
        background: #e2e8f0;
        border-radius: 3px;
        overflow: hidden;
    }
    .progress-fill {
        height: 100%;
        width: 0%;
        background: #4a90d9;
        border-radius: 3px;
        transition: width 0.25s;
    }

    /* ── Chat widget ── */
    .chat-widget {
        background: #ffffff;
        border: 1px solid #dde3ec;
        border-radius: 12px;
        box-shadow: 0 4px 18px rgba(0,0,0,0.08);
        display: flex;
        flex-direction: column;
        height: 500px;
        overflow: hidden;
    }
    .chat-header {
        background: linear-gradient(135deg, #4a90d9 0%, #2c5f9e 100%);
        color: #fff;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    .chat-header-icon {
        width: 32px; height: 32px;
        background: rgba(255,255,255,0.2);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 16px;
    }
    .chat-header-info h4 { margin: 0; font-size: 0.95em; font-weight: 600; }
    .chat-header-info p  { margin: 0; font-size: 0.72em; opacity: 0.85; }
    .chat-status-dot {
        width: 8px; height: 8px;
        background: #5dde8a;
        border-radius: 50%;
        margin-left: auto;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
    }

    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: #f5f7fb;
    }
    .chat-messages::-webkit-scrollbar { width: 5px; }
    .chat-messages::-webkit-scrollbar-thumb { background: #cdd3de; border-radius: 4px; }

    .msg-welcome {
        background: #eef2fb;
        border: 1px solid #d0d9f0;
        border-radius: 10px;
        padding: 10px 13px;
        font-size: 0.82em;
        color: #4a5568;
        line-height: 1.5;
    }
    .msg-welcome strong { display: block; margin-bottom: 4px; color: #2c5f9e; }

    .msg-row { display: flex; align-items: flex-end; gap: 8px; }
    .msg-row.user { flex-direction: row-reverse; }

    .msg-avatar {
        width: 28px; height: 28px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 13px; flex-shrink: 0;
    }
    .msg-row.assistant .msg-avatar { background: #dce8f8; color: #2c5f9e; }
    .msg-row.user .msg-avatar      { background: #d1f0e0; color: #1a7a45; }

    .msg-bubble {
        max-width: 82%;
        padding: 9px 13px;
        border-radius: 14px;
        font-size: 0.84em;
        line-height: 1.55;
        word-break: break-word;
    }
    .msg-row.assistant .msg-bubble {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-bottom-left-radius: 4px;
        color: #2d3748;
    }
    .msg-row.user .msg-bubble {
        background: #4a90d9;
        color: #ffffff;
        border-bottom-right-radius: 4px;
    }

    .typing-indicator { display: none; align-items: center; gap: 8px; padding: 4px 0; }
    .typing-indicator.active { display: flex; }
    .typing-dots {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        border-bottom-left-radius: 4px;
        padding: 10px 14px;
        display: flex; gap: 4px; align-items: center;
    }
    .typing-dot {
        width: 7px; height: 7px;
        background: #a0aec0;
        border-radius: 50%;
        animation: bounce 1.2s infinite;
    }
    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .typing-dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes bounce {
        0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
        30%            { transform: translateY(-5px); opacity: 1; }
    }

    .msg-error {
        background: #fff5f5;
        border: 1px solid #feb2b2;
        border-radius: 10px;
        padding: 9px 13px;
        font-size: 0.82em;
        color: #c53030;
    }

    .chat-input-area {
        padding: 12px;
        border-top: 1px solid #e8ecf2;
        background: #fff;
        flex-shrink: 0;
    }
    .chat-input-row { display: flex; gap: 8px; align-items: flex-end; }

    #chat-input {
        flex: 1;
        border: 1.5px solid #dde3ec;
        border-radius: 10px;
        padding: 9px 13px;
        font-size: 0.85em;
        resize: none;
        min-height: 38px;
        max-height: 100px;
        line-height: 1.5;
        outline: none;
        transition: border-color 0.2s;
        font-family: inherit;
    }
    #chat-input:focus { border-color: #4a90d9; }
    #chat-input::placeholder { color: #a0aec0; }

    #chat-send-btn {
        width: 38px; height: 38px;
        border-radius: 10px;
        background: #4a90d9;
        color: #fff;
        border: none;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        transition: background 0.2s, transform 0.1s;
        font-size: 16px;
    }
    #chat-send-btn:hover:not(:disabled)  { background: #2c5f9e; }
    #chat-send-btn:active:not(:disabled) { transform: scale(0.93); }
    #chat-send-btn:disabled { background: #cbd5e0; cursor: not-allowed; }

    .chat-hint { font-size: 0.72em; color: #a0aec0; margin-top: 6px; text-align: center; }

    /* ── Responsive ── */
    @media (max-width: 800px) {
        .page-wrapper { flex-direction: column; }
        .chat-panel   { width: 100%; position: static; }
        .chat-widget  { height: 360px; }
        .scale-legend { padding-left: 10px; }
    }
</style>


<div class="page-wrapper">

    <!-- ════════ LEFT: form + rating table ════════ -->
    <div class="form-panel">

        <div class="task-card">
            <strong>📋 Social Norms Task</strong>
            Imagine that a person has been given <strong>10 tokens</strong> and must decide how many to keep for
            themselves and how many to give to a charitable organization.
            For each possible allocation below, please rate how <em>socially appropriate</em> you think that
            choice would be, using the 7-point scale.
        </div>

        <div class="scale-legend">
            <span>Very inappropriate</span>
            <span>Neutral</span>
            <span>Very appropriate</span>
        </div>

        <div style="overflow-x: auto;">
        <table class="rating-table">
            <thead>
                <tr>
                    <th class="alloc-col">Allocation</th>
                    <th title="Very socially inappropriate">1</th>
                    <th title="Socially inappropriate">2</th>
                    <th title="Somewhat socially inappropriate">3</th>
                    <th class="neutral-col" title="Neither appropriate nor inappropriate">4</th>
                    <th title="Somewhat socially appropriate">5</th>
                    <th title="Socially appropriate">6</th>
                    <th title="Very socially appropriate">7</th>
                </tr>
            </thead>
            <tbody>

                {{ for alloc in allocations }}
                <tr>
                    <td class="alloc-label">
                        <span class="alloc-badge">Keep {{ alloc.keep }} &nbsp;·&nbsp; Give {{ alloc.give }}</span>
                        <span class="done-dot" id="dot-{{ alloc.field_name }}"></span>
                    </td>
                    {{ for v in "1234567" }}
                    <td class="radio-cell {{ if v == '4' }}neutral-col{{ endif }}">
                        <input type="radio"
                               name="{{ alloc.field_name }}"
                               id="{{ alloc.field_name }}_{{ v }}"
                               value="{{ v }}"
                               required>
                        <label for="{{ alloc.field_name }}_{{ v }}">{{ v }}</label>
                    </td>
                    {{ endfor }}
                </tr>
                {{ endfor }}

            </tbody>
        </table>
        </div>

        <div class="progress-wrap">
            <span class="progress-label" id="progress-label">0 / 11 answered</span>
            <div class="progress-track">
                <div class="progress-fill" id="progress-fill"></div>
            </div>
        </div>

    </div><!-- /form-panel -->


    <!-- ════════ RIGHT: AI chat ════════ -->
    <div class="chat-panel">
        <div class="chat-widget">

            <div class="chat-header">
                <div class="chat-header-icon">🤖</div>
                <div class="chat-header-info">
                    <h4>Task Assistant</h4>
                    <p>Clarifications only &nbsp;·&nbsp; No advice</p>
                </div>
                <div class="chat-status-dot"></div>
            </div>

            <div class="chat-messages" id="chat-messages">
                <div class="msg-welcome">
                    <strong>👋 Hello!</strong>
                    I can help clarify the task instructions. I <em>cannot</em> suggest answers or give
                    strategic advice. Feel free to ask if anything is unclear.
                </div>
            </div>

            <div style="padding: 0 16px 4px; background: #f5f7fb;">
                <div class="typing-indicator" id="typing-indicator">
                    <div class="msg-avatar" style="background:#dce8f8; color:#2c5f9e;">🤖</div>
                    <div class="typing-dots">
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                    </div>
                </div>
            </div>

            <div class="chat-input-area">
                <div class="chat-input-row">
                    <textarea id="chat-input" placeholder="Ask a question about the task…" rows="1"></textarea>
                    <button id="chat-send-btn" title="Send (Enter)">&#9658;</button>
                </div>
                <div class="chat-hint">Enter to send &nbsp;·&nbsp; Shift+Enter for new line</div>
            </div>

        </div>
    </div><!-- /chat-panel -->

</div><!-- /page-wrapper -->


<script>
/* ─── Progress bar + done-dot ─── */
(function () {
    const total   = 11;
    const fillEl  = document.getElementById('progress-fill');
    const labelEl = document.getElementById('progress-label');

    function updateProgress() {
        let answered = 0;
        for (let i = 0; i <= 10; i++) {
            const name = 'appropriateness_' + i;
            if (document.querySelector('input[name="' + name + '"]:checked')) {
                answered++;
                const dot = document.getElementById('dot-appropriateness_' + i);
                if (dot) dot.classList.add('visible');
            }
        }
        const pct = Math.round(answered / total * 100);
        fillEl.style.width  = pct + '%';
        labelEl.textContent = answered + ' / ' + total + ' answered';
    }

    document.addEventListener('change', function (e) {
        if (e.target && e.target.type === 'radio') updateProgress();
    });
})();


/* ─── AI Chat (oTree liveSend / liveRecv) ─── */
(function () {
    const messagesEl = document.getElementById('chat-messages');
    const inputEl    = document.getElementById('chat-input');
    const sendBtn    = document.getElementById('chat-send-btn');
    const typingEl   = document.getElementById('typing-indicator');

    function scrollToBottom() { messagesEl.scrollTop = messagesEl.scrollHeight; }

    function appendBubble(role, text) {
        const row    = document.createElement('div');
        row.className = 'msg-row ' + role;
        const avatar  = document.createElement('div');
        avatar.className = 'msg-avatar';
        avatar.textContent = role === 'user' ? '🧑' : '🤖';
        const bubble  = document.createElement('div');
        bubble.className = 'msg-bubble';
        bubble.textContent = text;
        row.appendChild(avatar);
        row.appendChild(bubble);
        messagesEl.appendChild(row);
        scrollToBottom();
    }

    function appendError(text) {
        const el = document.createElement('div');
        el.className = 'msg-error';
        el.textContent = '⚠️ ' + text;
        messagesEl.appendChild(el);
        scrollToBottom();
    }

    function setLoading(on) {
        typingEl.classList.toggle('active', on);
        sendBtn.disabled = on;
        inputEl.disabled = on;
        scrollToBottom();
    }

    inputEl.addEventListener('input', function () {
        this.style.height = 'auto';
        this.style.height = Math.min(this.scrollHeight, 100) + 'px';
    });

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

    function sendMessage() {
        const text = inputEl.value.trim();
        if (!text || sendBtn.disabled) return;
        appendBubble('user', text);
        inputEl.value = '';
        inputEl.style.height = 'auto';
        setLoading(true);
        liveSend({ type: 'chat', message: text });
    }

    /* oTree chiama questa funzione automaticamente con la risposta del server */
    function liveRecv(data) {
        setLoading(false);
        if (data.error)  appendError(data.error);
        else if (data.reply) appendBubble('assistant', data.reply);
    }

    window.liveRecv = liveRecv;
})();
</script>

{{ endblock }}