{% extends "base.html" %}
{% import "macros/admin_management_header.html" as mh %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/zephyre-licenses/assets/css/style.css?v=20260705">
{% endblock %}

{% block page_title %}Industrial License Engine{% endblock %}

{% block content %}
<div class="zephyre-container">
    <div id="state-data"
         data-user-id="{{ user.id }}"
         data-user-balance="{{ balance }}"
         data-currency-symbol="{{ currency_symbol }}"></div>

    {{ mh::management_header_simple(
        title="Zephyre Licenses",
        subtitle="Professional Software Provisioning & Management",
        title_heading="h1",
        include_actions_column=false
    ) }}

    <!-- Downloads Notice / Inset Box -->
    <div class="downloads-inset-box mb-4">
        <div class="d-flex align-items-center gap-3">
            <div class="inset-icon">
                <i class="fas fa-download text-primary"></i>
            </div>
            <div class="inset-content">
                <h5 class="m-0 font-weight-bold">Looking for Malayalam Dot Net installers?</h5>
                <p class="m-0 text-muted small">If you are starting from downloading Malayalam Dot Net products, <a href="/plugins/zephyre-licenses/downloads" class="font-weight-bold">check here</a> to compare editions and get download links.</p>
            </div>
        </div>
    </div>

    <!-- The Industrial Workspace -->
    <div class="industrial-card workspace-grid mb-5">
        <!-- Input Section -->
        <div class="code-entry-section">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="m-0 font-weight-bold">Batch Provisioning</h4>
                <span class="badge badge-primary">v2.0</span>
            </div>

            <div class="form-group mb-0">
                <div class="code-editor-wrapper">
                    <textarea id="lock-ids-textarea" class="code-textarea blocks-input min-h-48 font-mono"
                        aria-label="Device lock IDs to provision"
                        placeholder="PASTE LOCK IDs HERE...&#10;F2H8Q3W5-M7AEDS9K-N2H8Q3W5&#10;QS8NSQKF-MEN5Q7W2-278NQMM5"></textarea>
                </div>
                <div class="mt-3 text-muted small d-flex align-items-center">
                    <i class="fas fa-terminal mr-2"></i> Engine scans for patterns automatically
                </div>
            </div>
        </div>

        <!-- Staging Section -->
        <div class="staging-section" id="generate-modal" data-user-balance="{{ balance }}">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="m-0 font-weight-bold">Provisioning Staging</h4>
            </div>

            <div class="staging-table-container">
                <div id="bulk-identification-container" class="d-none h-100 d-flex flex-column">
                    <table class="bulk-results-table">
                        <thead>
                            <tr>
                                <th>Device ID</th>
                                <th>Target Product</th>
                                <th class="text-right">Price</th>
                            </tr>
                        </thead>
                        <tbody id="bulk-results-body">
                            <!-- Injected dynamically -->
                        </tbody>
                    </table>
                </div>

                <div id="no-id-placeholder" class="empty-placeholder">
                    <i class="fas fa-qrcode"></i>
                    <p>Enter device IDs on the left to begin identification</p>
                </div>
            </div>

            <div class="checkout-footer mt-4">
                <div class="total-display">
                    <div class="label">Wallet Balance</div>
                    <div class="amount text-success">{{ currency_symbol }}{{ balance | price }}</div>
                </div>
                <div class="total-display">
                    <div class="label">Projected Cost</div>
                    <div class="amount" id="bulk-total-price">{{ currency_symbol }}0</div>
                </div>
                <div class="d-flex flex-column align-items-end">
                    <div id="balance-warning" class="d-none text-danger small font-weight-bold mb-2"></div>
                    <button id="bulk-activate-btn" class="blocks-button blocks-button-primary px-8 shadow-lg shadow-brand/20" disabled>
                        <i class="fas fa-bolt mr-2"></i> PROVISION LICENSES
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- History Section -->
    <div class="history-section">
        <div class="d-flex align-items-center gap-3 mb-4">
            <h3 class="m-0 font-weight-bold">Provisioning Logs</h3>
            <div class="flex-grow-1 border-top opacity-10"></div>
        </div>

        <div class="history-card">
            <table class="history-table">
                <thead>
                    <tr>
                        <th>Identified Product</th>
                        <th>Device Signature</th>
                        <th>Unlock Key</th>
                        <th>Timestamp</th>
                    </tr>
                </thead>
                <tbody>
                    {% for gen in history %}
                    <tr>
                        <td class="font-weight-bold">{{ gen.product_name }}</td>
                        <td><span class="id-badge">{{ gen.lock_id }}</span></td>
                        <td class="unlock-code-cell">{{ gen.unlock_code }}</td>
                        <td class="text-muted small">{{ gen.created_at | date_in_tz(timezone=settings.timezone) }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="text-center py-5">
                            <div class="empty-placeholder">
                                <i class="fas fa-database mb-3"></i>
                                <p>No provisioning records found.</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/zephyre-licenses/assets/js/app.js"></script>
{% endblock %}