{% extends "base.html" %}

{% block title %}{{ thread.subject }} - git-ew{% endblock %}

{% macro render_message(item) %}
<div class="message-wrapper">
    <div class="message" data-message-id="{{ item.message.message_id }}">
        <div class="message-header">
            <div class="message-info">
                <button class="collapse-btn" onclick="toggleSubthread(event, '{{ item.message.message_id }}')" title="Toggle subthread">
                    <span class="collapse-icon">▼</span>
                </button>
                <div class="message-author">
                    <strong>{{ item.message.from_name }}</strong>
                    <span class="message-email">&lt;{{ item.message.from_email }}&gt;</span>
                </div>
            </div>
            <div class="message-date">
                <code>{{ item.message.message_id }}</code>
                <span>{{ item.message.date.strftime('%Y-%m-%d %H:%M') }}</span>
            </div>
        </div>
    <div class="message-body">
        {# TODO: Option to render Markdown (`|safe`) #}
        <div class="message-text">{{ item.body }}</div>
        {% if item.quoted_body %}
        <details class="quoted-section">
            <summary>Show quoted text</summary>
            <pre class="quoted-text">{{ item.quoted_body }}</pre>
        </details>
        {% endif %}
    </div>
        {% if item.message.is_patch and item.message.patch_content %}
        <div class="message-patch">
            <details>
                <summary>View Patch</summary>
                <pre class="patch-content">{{ item.message.patch_content }}</pre>
            </details>
        </div>
        {% endif %}
        <div class="message-actions">
            <button class="btn btn-sm btn-reply" onclick="replyToMessage('{{ item.message.message_id }}', '{{ item.message.from_name }}')">
                Reply
            </button>
        </div>
    </div>
    {% if item.children %}
    <div class="message-children">
        {% for child in item.children %}
            {{ render_message(child) }}
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endmacro %}

{% block content %}
<div class="thread-view">
    <div class="thread-header">
        <div class="thread-title-row">
            <h2>{{ thread.subject }}</h2>
        </div>
        <div class="thread-meta">
            {% if thread.is_patch %}
            <span class="badge badge-patch">Patch</span>
            {% endif %}
            <span class="thread-date">
                Created {{ thread.created_at.strftime('%Y-%m-%d %H:%M') }}
            </span>
        </div>
    </div>

    <div class="messages-container">
        {% for item in messages %}
            {{ render_message(item) }}
        {% endfor %}
    </div>

    <div class="reply-form" id="reply-form" style="display: none;">
        <h3>Reply to <span id="reply-to-name"></span></h3>
        <form onsubmit="submitReply(event)">
            <input type="hidden" id="reply-to-id" name="in_reply_to">
            <div class="form-group">
                <label for="reply-body">Message (plain text):</label>
                <textarea id="reply-body" name="body" rows="10" required placeholder="Write your reply here..."></textarea>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Send Reply</button>
                <button type="button" class="btn btn-secondary" onclick="cancelReply()">Cancel</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const threadId = {{ thread.id }};

function toggleSubthread(event, messageId) {
    event.preventDefault();
    event.stopPropagation();

    const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
    const button = event.target.closest('.collapse-btn');

    messageElement.classList.toggle('collapsed');
    button.querySelector('.collapse-icon').textContent = messageElement.classList.contains('collapsed') ? '▶' : '▼';
}

function replyToMessage(messageId, authorName) {
    document.getElementById('reply-form').style.display = 'block';
    document.getElementById('reply-to-id').value = messageId;
    document.getElementById('reply-to-name').textContent = authorName;
    document.getElementById('reply-body').focus();
}

function cancelReply() {
    document.getElementById('reply-form').style.display = 'none';
    document.getElementById('reply-body').value = '';
}

async function submitReply(event) {
    event.preventDefault();

    const formData = {
        body: document.getElementById('reply-body').value,
        in_reply_to: document.getElementById('reply-to-id').value || null
    };

    try {
        const response = await fetch(`/api/thread/${threadId}/comment`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        });

        if (response.ok) {
            alert('Reply sent successfully!');
            location.reload();
        } else {
            const error = await response.json();
            alert('Failed to send reply: ' + (error.detail || 'Unknown error'));
        }
    } catch (error) {
        alert('Failed to send reply: ' + error.message);
    }
}

</script>
{% endblock %}