{% extends "base.html" %}
{% import "macros/empty_state.html" as empty %}

{% block head %}


{% endblock %}

{% block content %}
<div class="qr-owner-container">
    <!-- Premium Header Hero -->
    <div class="premium-hero-header">
        <div>
            <h1 class="premium-gradient-text">My QR Stickers</h1>
            <p class="text-muted m-0">Secure, privacy-first contact and anonymous messaging platform.</p>
        </div>
        <button class="blocks-button blocks-button-primary" id="create-sticker-btn" {% if stickers | length >= plugin_settings.max_stickers_per_user | default(value=10) | int %}disabled title="Maximum limit reached"{% endif %}>
            <i class="fas fa-plus"></i> New Sticker
        </button>
    </div>

    <!-- Compute stats in Tera -->
    {% set total_scans = 0 %}
    {% for sticker in stickers %}
        {% set_global total_scans = total_scans + sticker.scan_count %}
    {% endfor %}

    <!-- Statistics Grid -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon bg-blue-glow">
                <i class="fas fa-qrcode"></i>
            </div>
            <div class="stat-content">
                <span class="stat-label">Total Stickers</span>
                <span class="stat-val">{{ stickers | length }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon bg-purple-glow">
                <i class="fas fa-eye"></i>
            </div>
            <div class="stat-content">
                <span class="stat-label">Total Scans</span>
                <span class="stat-val">{{ total_scans }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon bg-green-glow">
                <i class="fas fa-shield-alt"></i>
            </div>
            <div class="stat-content">
                <span class="stat-label">Abuse Control</span>
                <span class="stat-val">Active</span>
            </div>
        </div>
    </div>

    <!-- Sticker Grid -->
    <div class="sticker-grid">
        {% for sticker in stickers %}
        <div class="sticker-card">
            {% if sticker.unread_count and sticker.unread_count | int > 0 %}
            <span class="unread-badge" title="{{ sticker.unread_count }} unread message(s)"><i class="fas fa-envelope"></i> {{ sticker.unread_count }}</span>
            {% endif %}
            <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                <h3 class="m-0 min-w-0 break-words text-lg font-semibold text-foreground">{{ sticker.label }}</h3>
                <span class="badge badge-{{ sticker.status_state }}">{{ sticker.status_state }}</span>
            </div>
            <p class="status-line text-sm text-muted" title="Public status message"><i class="fas fa-bullhorn"></i> {{ sticker.status_message }}</p>
            
            <div class="qr-preview-container" data-shortcode="{{ sticker.short_code }}" data-label="{{ sticker.label }}" data-status-message="{{ sticker.status_message }}">
                <!-- QR is generated via JS -->
                <div class="qr-placeholder spinner">
                    <i class="fas fa-spinner fa-spin text-muted"></i>
                </div>
            </div>

            <div class="flex items-center justify-between gap-4 text-sm text-muted">
                <span><i class="fas fa-eye"></i> {{ sticker.scan_count }} Scans</span>
                <span><i class="fas fa-comment"></i> {% if sticker.messaging_enabled %}Chats Enabled{% else %}Disabled{% endif %}</span>
            </div>

            <div class="actions mt-auto flex flex-wrap items-center gap-2">
                <a href="/plugins/qr-connect/sticker_settings?id={{ sticker.id }}" class="blocks-button blocks-button-sm blocks-button-secondary flex-1">Settings</a>
                <a href="/plugins/qr-connect/conversations?sticker_id={{ sticker.id }}" class="blocks-button blocks-button-sm blocks-button-secondary flex-1">Chats{% if sticker.unread_count and sticker.unread_count | int > 0 %} ({{ sticker.unread_count }}){% endif %}</a>
                <button class="blocks-icon-button download-qr-btn" aria-label="Download QR for {{ sticker.label }}" data-shortcode="{{ sticker.short_code }}" data-label="{{ sticker.label }}" data-status-message="{{ sticker.status_message }}"><i class="fas fa-download"></i></button>
            </div>
        </div>
        {% else %}
        <div class="col-span-full">
            {{ empty::empty_state(icon="fas fa-qrcode", title="No Stickers Yet", description="Create your first QR sticker to start receiving messages securely.") }}
        </div>
        {% endfor %}
    </div>
</div>

<!-- Create Modal (conforming to premium crud-modal guidelines) -->
<div id="create-modal" class="modal crud-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Create New Sticker</h3>
            <button type="button" class="blocks-icon-button close-btn cancel-modal" aria-label="Close">&times;</button>
        </div>
        <form id="create-sticker-form" action="/plugins/qr-connect/sticker_create" method="POST">
            <div class="modal-body">
                <div class="form-group mb-4">
                    <label>Sticker Label (for your eyes only)</label>
                    <input type="text" name="label" placeholder="e.g. My Car Dashboard" required class="blocks-input">
                </div>
                <div class="form-group mb-4">
                    <label>Public Status Message</label>
                    <input type="text" name="status_message" value="Hello! Scan this QR to reach me." required class="blocks-input">
                </div>
                <div class="form-group mb-4 flex-row items-center gap-3">
                    <input type="checkbox" id="messaging_enabled" name="messaging_enabled" value="true" {% if plugin_settings.default_messaging_enabled == 'true' %}checked{% endif %} class="size-4 accent-brand">
                    <label for="messaging_enabled" class="cursor-pointer">Enable Anonymous Messaging</label>
                </div>
                <div class="form-group mb-2">
                    <label>Auto-Reply Text</label>
                    <input type="text" name="auto_reply_text" value="{{ plugin_settings.default_auto_reply }}" class="blocks-input">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="blocks-button blocks-button-secondary cancel-modal">Cancel</button>
                <button type="submit" class="blocks-button blocks-button-primary">Create Sticker</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    window.BASE_URL = "{{ base_url | safe }}";
</script>
<script src="/plugins/qr-connect/assets/js/qr_connect_dashboard.js?v={{ now_ts }}"></script>
{% endblock %}