{% extends "base.html" %}
{% import "qshare/components.html" as components %}

{% block page_title %}Connect to Session{% endblock %}

{% block head %}
<script src="/static/js/blocks-p2p-compat.js"></script>
<script src="/static/js/blocks-p2p-signaling.js"></script>
<script src="/static/js/blocks-p2p-webrtc.js"></script>
<script src="/static/js/blocks-p2p-session.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
{% endblock %}

{% block content %}
<div class="main-content-area qshare-app" id="qshare-app"
     data-user-id="{{ user.id | default(value='') }}"
     data-target-session="{{ target_session | json_encode | default(value='{}') }}"
     data-code-length="{{ session_code_length | default(value=5) }}">
    
    <input type="hidden" id="send-receiver-code" value="">

    <div class="hub-container">
        <!-- THE IRON CURTAIN: Lock Screen -->
        <div id="guest-lock-screen" class="iron-curtain-bg hidden">
            <div class="board-panel guest-container text-center p-6 sm:p-10">
                <div class="panel-header-premium">
                    <div class="shield-icon-wrapper">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h2 class="mb-1">Secure Session Entry</h2>
                    <p class="text-muted text-xs">This transfer hub is protected. Enter the PIN provided by the host.</p>
                </div>
                
                <div class="mt-4">
                    <div id="pin-input-group" class="pin-digit-container" 
                         data-length="{{ target_session.pin_length | default(value=4) }}">
                        <!-- Digits injected by guest.js -->
                    </div>

                    
                    <input type="hidden" id="guest-pin" value="">

                    <button class="blocks-button blocks-button-primary w-full mt-4" id="btn-unlock">
                        Unlock
                    </button>
                    
                    <p id="lock-error" class="text-danger text-xs mt-3 hidden">
                        <i class="fas fa-times-circle"></i> Invalid PIN Access Denied
                    </p>
                </div>
            </div>
        </div>

        <!-- THE COMMAND BOARD: Dashboard -->
        <div id="guest-dashboard" class="command-board hidden">
            <!-- Header Row -->
            <div class="board-panel span-full entrance-hidden">
                <div class="panel-header">
                    <div class="panel-title">
                        <i class="fas fa-link text-brand"></i>
                        <span id="guest-header">Connected</span>
                    </div>
                    <div class="status-badge status-active" id="guest-connection-status">
                        <div class="status-indicator-dot"></div>
                        <span>Waiting for the other person…</span>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <i class="fas fa-info-circle text-muted text-xs"></i>
                    <p class="m-0 text-muted text-xs">Files stay on your devices. One of you needs an active subscription to transfer.</p>
                </div>
            </div>

            <!-- Interaction Row: Symmetric Transfers -->
            <!-- Zone 1: Outgoing (Guest -> Anchor) -->
            {{ components::sender_card(prefix="send") }}
            {{ components::receiver_card(prefix="receive") }}
        </div>

        <!-- Connection Error Screen -->
        <div id="guest-error-screen" class="iron-curtain-bg hidden">
            <div class="board-panel guest-container text-center">
                <i class="fas fa-exclamation-triangle fa-3x text-danger mb-4"></i>
                <h2>Connection Failed</h2>
                <p>The session may have expired or the security link is invalid.</p>
                <a href="/plugins/qshare" class="blocks-button blocks-button-secondary mt-4">Return Home</a>
            </div>
        </div>
    </div>
</div>

<div id="qshare-billing-modal" class="crud-modal" data-blocks-overlay>
    <div class="modal-content">
        <div class="modal-header">
            <h2>Subscription required</h2>
            <button type="button" class="close-btn" id="btn-billing-modal-close" aria-label="Close subscription dialog">&times;</button>
        </div>
        <div class="modal-body">
            <p id="qshare-billing-modal-msg">One of you needs an active paid subscription to transfer files. There is no free usage.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="blocks-button blocks-button-secondary" id="btn-billing-modal-dismiss">Not now</button>
            <a class="blocks-button blocks-button-primary" href="/plugins/user-billing">Go to billing</a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/qshare/assets/js/qshare-base.js"></script>
<script src="/plugins/qshare/assets/js/qshare-logic.js"></script>
<script src="/plugins/qshare/assets/js/qshare-ui.js"></script>
{% if is_debug %}
<script src="/plugins/qshare/assets/js/debug.js"></script>
{% endif %}
{% endblock %}