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

{% block page_title %}QuickShare{% 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://cdn.jsdelivr.net/npm/qrcode_js@1.0.0/qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
{% endblock %}

{% block content %}
<div id="qshare-app" class="qshare-app"
     data-user-id="{{ user.id | default(value='') }}"
     data-is-paid="{{ is_paid | default(value=false) }}"
     data-is-guest="{{ is_guest_session | default(value=false) }}"
     data-is-authenticated="{{ is_authenticated | default(value=false) }}"
     data-session-settings="{{ session_settings | json_encode | default(value='{}') }}"
     data-code-length="{{ session_code_length | default(value=5) }}">

    <div class="hub-container">
        <div class="content-header">
            <h1>QuickShare</h1>
            <p class="hub-tagline">Send files privately — peer to peer, no cloud storage.</p>
        </div>

        <div id="qshare-billing-banner" class="qshare-banner {% if is_paid %}hidden{% endif %}" role="status">
            <div class="qshare-banner-body">
                <i class="fas fa-lock" aria-hidden="true"></i>
                <div>
                    <strong>Subscription required to transfer</strong>
                    <p>Either you or the other person needs an active paid subscription. Guests can still wait for a paid peer.</p>
                </div>
            </div>
            <a class="blocks-button blocks-button-primary" href="/plugins/user-billing">Go to billing</a>
        </div>

        <ol class="qshare-steps" aria-label="How to transfer">
            <li><span class="step-num">1</span> Share your code or link</li>
            <li><span class="step-num">2</span> Wait until connected</li>
            <li><span class="step-num">3</span> Drop files or save incoming files</li>
        </ol>

        <div class="command-board">
            <div class="board-panel span-full entrance-hidden">
                <div class="panel-header">
                    <div class="panel-title">
                        <i class="fas fa-share-alt text-brand"></i>
                        Your share code
                    </div>
                    <div class="user-status">
                        <div class="status-indicator-dot"></div>
                        <span id="hub-ready-label">Waiting for the other person…</span>
                    </div>
                </div>
                <div class="board-anchor-layout">
                    <div class="premium-code-display">
                        <span class="code-label">Share this code</span>
                        <div class="code-number-large" id="anchor-code"
                             data-pattern="{{ format_pattern }}"
                             data-raw-code="{{ five_digit_id }}">{{ five_digit_id }}</div>
                        <div id="hub-session-name-display" class="session-name-badge {% if not session_settings.name %}hidden{% endif %}">
                            <i class="fas fa-tag"></i> <span class="name-text">{{ session_settings.name }}</span>
                        </div>
                        {% if is_guest_session %}
                        <p class="guest-code-note text-muted text-xs">Temporary code — expires in a few hours. Sign in to keep a lasting code and PIN.</p>
                        {% endif %}
                    </div>

                    <div class="board-invite-area">
                        <h3>Invite someone</h3>
                        <p class="text-muted text-xs">Send the link or code. Files stay on your devices.</p>

                        <div class="link-box">
                            <input type="text" id="session-link" class="blocks-input" readonly value="" aria-label="Share link">
                            <button type="button" class="blocks-button blocks-button-secondary" id="btn-copy-link">
                                <i class="fas fa-copy"></i> Copy
                            </button>
                        </div>

                        <div class="flex flex-wrap gap-2 mt-2">
                            <button type="button" class="blocks-button blocks-button-secondary flex-grow-1" id="btn-toggle-qr">
                                <i class="fas fa-qrcode"></i> QR
                            </button>
                            <button type="button" class="blocks-button blocks-button-secondary flex-grow-1" id="btn-web-share">
                                <i class="fas fa-share"></i> Share
                            </button>
                            {% if is_authenticated %}
                            <button type="button" class="blocks-button blocks-button-secondary flex-grow-1" id="btn-qshare-settings-open">
                                <i class="fas fa-cog"></i> Settings
                            </button>
                            {% endif %}
                        </div>

                        <div class="join-other mt-3">
                            <label class="text-xs text-muted" for="join-other-code">Or join someone else’s code</label>
                            <div class="link-box">
                                <input type="text" id="join-other-code" class="blocks-input join-input"
                                       placeholder="{{ format_pattern | replace(from='X', to='•') }}"
                                       maxlength="{{ session_code_length }}"
                                       autocomplete="off">
                                <button type="button" class="blocks-button blocks-button-primary" id="btn-join-other">Join</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="qr-container-wrapper" class="qr-container hidden">
                    <div id="qrcode"></div>
                </div>
            </div>

            {{ components::sender_card(prefix="send") }}
            {{ components::receiver_card(prefix="receive") }}

            <div id="global-transfer-progress" class="board-panel span-full hidden entrance-hidden">
                <div class="flex items-center justify-between gap-3 mb-3">
                    <h3 id="progress-title" class="m-0">Transfer in progress</h3>
                    <span id="progress-eta" class="text-muted text-xs">0.0 MB/s</span>
                </div>
                <div class="progress-bar corporate-progress">
                    <div class="progress-fill w-0" id="progress-fill" ></div>
                </div>
                <div class="flex justify-between gap-3 mt-3">
                    <span id="progress-filename" class="text-muted text-xs">idle…</span>
                    <span id="progress-percent" class="font-bold text-brand">0%</span>
                </div>
            </div>

            {% if is_authenticated %}
            <div class="board-panel span-full entrance-hidden" id="history-panel">
                <div class="panel-header">
                    <div class="panel-title">
                        <i class="fas fa-history text-brand"></i>
                        My recent transfers
                    </div>
                </div>
                <div id="history-list" class="history-list">
                    <p class="text-muted text-xs">Loading…</p>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% if is_authenticated %}
<div id="modal-settings" class="crud-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Session Settings</h2>
            <button type="button" class="close-btn" id="btn-qshare-settings-close-x" aria-label="Close settings">&times;</button>
        </div>
        <div class="modal-body">
            <div class="settings-list">
                <div class="setting-item">
                    <div class="setting-info">
                        <label class="text-sm font-semibold" for="setting-pin">Session Password (PIN)</label>
                        <p>Require guests to enter a PIN to connect.</p>
                    </div>
                    <input type="text" id="setting-pin" class="blocks-input" placeholder="Optional PIN" maxlength="6" class="blocks-input w-full sm:max-w-32">
                </div>

                <div class="setting-item">
                    <div class="setting-info">
                        <label class="text-sm font-semibold" for="setting-name">Session Display Name</label>
                        <p>What guests see when they connect.</p>
                    </div>
                    <input type="text" id="setting-name" class="blocks-input" placeholder="E.g. Project Delivery" class="blocks-input w-full sm:max-w-52">
                </div>

                <div class="setting-item">
                    <div class="setting-info">
                        <h4>Automatic Directory Access</h4>
                        <p>Grant permission to write files directly to your disk.</p>
                        <div id="hub-auto-accept-compat-notice" class="compat-notice hidden">
                            <span class="notice-icon">ℹ️</span>
                            <span>Auto-Accept requires <strong>Chrome</strong>, <strong>Edge</strong>, or <strong>Opera</strong>.</span>
                        </div>
                    </div>
                    <button type="button" class="blocks-button-sm blocks-button blocks-button-primary" id="btn-grant-access">Grant Access</button>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div id="save-status" class="save-status hidden"></div>
            <button type="button" class="blocks-button blocks-button-secondary" id="btn-qshare-settings-save">Close &amp; Save</button>
        </div>
    </div>
</div>
{% endif %}

<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 %}