{% extends "base.html" %}

{% block content %}
<div class="wa-page">
    {% if error %}
    <div class="wa-shell">
        <div class="wa-header">
            <span class="wa-avatar"><i class="fas fa-qrcode"></i></span>
            <div class="wa-contact"><span class="wa-name">QR Contact</span><span class="wa-sub">unavailable</span></div>
        </div>
        <div class="qrc-card items-center text-center">
            <i class="mb-2 text-3xl text-danger"></i>
            <h3>{{ error }}</h3>
            <p>The sticker might have been deleted or is invalid.</p>
        </div>
    </div>
    {% else %}
    <div class="wa-shell">
        <!-- WhatsApp-style contact header -->
        <div class="wa-header">
            <span class="wa-avatar">
                {% if sticker.status_state == 'emergency' %}<i class="fas fa-exclamation-triangle"></i>
                {% elif sticker.status_state == 'busy' %}<i class="fas fa-minus-circle"></i>
                {% elif sticker.status_state == 'away' %}<i class="fas fa-clock"></i>
                {% else %}<i class="fas fa-user"></i>{% endif %}
            </span>
            <div class="wa-contact">
                <span class="wa-name">Vehicle Owner</span>
                <span class="wa-sub"><span class="wa-dot wa-dot-{{ sticker.status_state }}"></span>{{ sticker.status_state }} • tap to view status</span>
            </div>
            <span class="wa-secure" title="Anonymous & private"><i class="fas fa-lock"></i></span>
        </div>

        <!-- Status message as WhatsApp encryption-style notice -->
        <div class="wa-chat" id="chat-wrapper">
            <div class="wa-status-note">
                <i class="fas fa-bullhorn"></i>
                <span>{{ sticker.status_message }}</span>
            </div>

            {% if is_closed == 1 or is_blocked == 1 %}
            <div class="wa-system">This conversation has been closed by the owner.</div>
            {% endif %}

            {% if sticker.messaging_enabled %}
            <div class="chat-messages wa-messages" id="chat-messages">
                {% set self_type = "scanner" %}
                {% include "qr-connect/_wa_messages.html" %}
            </div>
            {% else %}
            <div class="wa-system">The owner is not accepting messages at this time.</div>
            {% endif %}
        </div>

        {% if sticker.messaging_enabled and is_closed == 0 and is_blocked == 0 %}
        <div class="wa-inputbar chat-input">
            <form id="scan-message-form" class="wa-form">
                <input type="hidden" id="sticker_id" value="{{ sticker.id }}">
                <input type="text" id="message_input" class="blocks-input wa-text" placeholder="Type a message..." required autocomplete="off" maxlength="2000">
                <button type="submit" class="blocks-button blocks-button-primary wa-send" id="send-btn" aria-label="Send">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </form>
        </div>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
    window.QR_CONNECT = {
        sticker_id: "{{ sticker.id | default(value='') }}",
        conversation_id: "{{ conversation_id | default(value='') }}"
    };
</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_scan.js?v={{ now_ts }}"></script>
{% endblock %}