{% extends "base.html" %}

{% block content %}
<div class="wa-page">
    <div class="wa-shell">
        <!-- WhatsApp-style contact header (owner / receiver view) -->
        <div class="wa-header">
            <span class="wa-avatar"><i class="fas fa-user"></i></span>
            <div class="wa-contact">
                <span class="wa-name">{{ conversation.scanner_display_name }}</span>
                <span class="wa-sub">via {{ conversation.sticker_label }} • {% if conversation.is_blocked == 1 %}blocked{% elif conversation.is_closed == 1 %}closed{% else %}active{% endif %}</span>
            </div>
            {% if conversation.is_closed == 0 and conversation.is_blocked == 0 %}
            <div class="wa-actions">
                <button class="blocks-button blocks-button-sm blocks-button-secondary close-convo-btn" data-id="{{ conversation.id }}">Close</button>
                <button class="blocks-button blocks-button-sm blocks-button-danger block-convo-btn" data-id="{{ conversation.id }}">Block</button>
            </div>
            {% else %}
            <span class="badge badge-secondary">{% if conversation.is_blocked == 1 %}Blocked{% else %}Closed{% endif %}</span>
            {% endif %}
        </div>

        <div class="wa-chat" id="chat-wrapper">
            <div class="wa-status-note">
                <i class="fas fa-lock"></i>
                <span>Anonymous chat — no phone numbers are shared.</span>
            </div>

            {% if conversation.is_closed == 1 or conversation.is_blocked == 1 %}
            <div class="wa-system">This conversation is {% if conversation.is_blocked == 1 %}blocked{% else %}closed{% endif %}.</div>
            {% endif %}

            <div class="chat-messages wa-messages" id="chat-messages">
                {% set self_type = "owner" %}
                {% set empty_text = "No messages yet. Say hello to start the chat." %}
                {% include "qr-connect/_wa_messages.html" %}
            </div>
        </div>

        {% if conversation.is_closed == 0 and conversation.is_blocked == 0 %}
        <div class="wa-inputbar chat-input">
            <form id="owner-reply-form" class="wa-form">
                <input type="hidden" id="conversation_id" value="{{ conversation.id }}">
                <input type="text" id="reply_input" class="blocks-input wa-text" placeholder="Type a reply..." required autocomplete="off" maxlength="2000">
                <button type="submit" class="blocks-button blocks-button-primary wa-send" id="reply-btn" aria-label="Send">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </form>
        </div>
        {% endif %}
    </div>
</div>
<div class="text-center">
    <a href="/plugins/qr-connect/conversations" class="wa-back"><i class="fas fa-arrow-left"></i> Back to Chats</a>
</div>
{% endblock %}

{% block scripts %}
<script>
    window.QR_CONNECT = {
        conversation_id: "{{ conversation.id }}"
    };
</script>
<script src="/plugins/qr-connect/assets/js/qr_connect_webrtc.js?v={{ now_ts }}"></script>
<script src="/plugins/qr-connect/assets/js/qr_connect_chat.js?v={{ now_ts }}"></script>
<script src="/plugins/qr-connect/assets/js/qr_connect_owner.js?v={{ now_ts }}"></script>
{% endblock %}