{% extends "admin_base.html" %}
{% import "macros/user_cell.html" as user_cell %}
{% import "macros/admin_crud_list.html" as crud %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/payout/assets/css/payout.ui.css">
{% endblock %}

{% block page_title %}Payout Master Control{% endblock %}
{% block admin_content %}
<div id="payout-app" 
     class="payout-container admin-view" 
     data-is-admin="true"
     data-currency="{{ currency_symbol | default(value='₹') }}">
    
    {{ crud::shell_open(config_url="/plugins/payout/assets/admin/payout_page.json", mount_id="payout-admin-header", custom_mount=true) }}
    <div data-crud-toolbar-extra class="flex gap-2">
        <button type="button" class="btn btn-secondary" id="simulate-activity-btn">
            <i class="fas fa-bolt"></i> Simulate
        </button>
        <button type="button" class="btn btn-primary" data-modal-open="profile-modal">
            <i class="fas fa-plus"></i> Create Profile
        </button>
    </div>
    {{ crud::shell_close() }}

    <div class="blocks-section-tabs payout-tabs mb-6" role="tablist" aria-label="Payout administration">
        <button type="button" id="admin-profiles-tab" role="tab" aria-controls="admin-profiles-panel" aria-selected="true" class="blocks-section-tab payout-tab active" data-target="admin-profiles-panel">Commission Profiles</button>
        <button type="button" id="admin-events-tab" role="tab" aria-controls="admin-events-panel" aria-selected="false" class="blocks-section-tab payout-tab" data-target="admin-events-panel">Recent Activity</button>
        <button type="button" id="admin-recipients-tab" role="tab" aria-controls="admin-recipients-panel" aria-selected="false" class="blocks-section-tab payout-tab" data-target="admin-recipients-panel">Recipients</button>
        <button type="button" id="admin-queue-tab" role="tab" aria-controls="admin-queue-panel" aria-selected="false" class="blocks-section-tab payout-tab" data-target="admin-queue-panel">Payout Queue</button>
    </div>

    <div class="category-section mb-6">
        <div class="widget-group-container">
            <div class="widget-group span-full">
                <div class="widget-group-header">
                    <i class="fas fa-wallet" style="margin-right: 6px; opacity: 0.7;"></i>
                    Financial Oversight
                </div>
                <div class="widget-mini-grid">
                    <div class="widget-mini-card">
                        <div class="widget-mini-value"><span class="currency-symbol">{{ currency_symbol | default(value='₹') }}</span> {{ stats.total_balance | price }}</div>
                        <div class="widget-mini-label">Total Outstanding</div>
                    </div>
                    <div class="widget-mini-card">
                        <div class="widget-mini-value">{{ stats.pending_payouts }}</div>
                        <div class="widget-mini-label">Pending Payouts</div>
                    </div>
                    <div class="widget-mini-card">
                        <div class="widget-mini-value">OPERATIONAL</div>
                        <div class="widget-mini-label">System Health</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="admin-events-panel" class="payout-panel" role="tabpanel" aria-labelledby="admin-events-tab" tabindex="0">
        {{ crud::shell_open(config_url="/plugins/payout/assets/admin/events_list.json", mount_id="payout-events-list", custom_mount=true) }}
        <table class="blocks-admin-table responsive-table mb-0">
            <thead></thead>
            <tbody>
                <tr><td colspan="5" class="crud-empty-state text-center">Loading events…</td></tr>
            </tbody>
        </table>
        {{ crud::shell_close() }}
    </div>

    <div id="admin-recipients-panel" class="payout-panel" role="tabpanel" aria-labelledby="admin-recipients-tab" tabindex="0">
        {{ crud::shell_open(config_url="/plugins/payout/assets/admin/recipients_list.json", mount_id="payout-recipients-list", custom_mount=true) }}
        <table class="blocks-admin-table responsive-table mb-0">
            <thead></thead>
            <tbody>
                <tr><td colspan="4" class="crud-empty-state text-center">Loading recipients…</td></tr>
            </tbody>
        </table>
        {{ crud::shell_close() }}
    </div>

    <div id="admin-queue-panel" class="payout-panel" role="tabpanel" aria-labelledby="admin-queue-tab" tabindex="0">
        {{ crud::shell_open(config_url="/plugins/payout/assets/admin/queue_list.json", mount_id="payout-queue-list", custom_mount=true) }}
        <div data-crud-toolbar-extra class="mb-3">
            <button type="button" class="btn btn-primary" id="process-queue-btn">Process Now</button>
        </div>
        <table class="blocks-admin-table responsive-table mb-0">
            <thead></thead>
            <tbody>
                <tr><td colspan="5" class="crud-empty-state text-center">Loading queue…</td></tr>
            </tbody>
        </table>
        {{ crud::shell_close() }}
    </div>
    <div id="admin-profiles-panel" class="payout-panel active" role="tabpanel" aria-labelledby="admin-profiles-tab" tabindex="0">
        {{ crud::shell_open(config_url="/plugins/payout/assets/admin/profiles_list.json", mount_id="payout-profiles-list", custom_mount=true) }}
        <table>
            <thead></thead>
            <tbody>
                <tr><td colspan="6" class="crud-empty-state text-center">Loading profiles…</td></tr>
            </tbody>
        </table>
        {{ crud::shell_close() }}
    </div>

</div>

<!-- Commission Profile Modal -->
<div id="profile-modal" class="payout-modal">
    <div class="payout-modal-content wide">
        <div class="modal-header">
            <h2>Commission Profile Builder</h2>
            <button class="close-btn" data-modal-close>&times;</button>
        </div>
        <form id="profile-form">
            <input type="hidden" name="id">
            
            <div class="modal-body">
                <div class="payout-tabs-mini">
                    <button type="button" id="tab-who-button" role="tab" aria-controls="tab-who" aria-selected="true" class="mini-tab active" data-tab="tab-who">1. WHO</button>
                    <button type="button" id="tab-when-button" role="tab" aria-controls="tab-when" aria-selected="false" class="mini-tab" data-tab="tab-when">2. WHEN</button>
                    <button type="button" id="tab-how-button" role="tab" aria-controls="tab-how" aria-selected="false" class="mini-tab" data-tab="tab-how">3. HOW MUCH</button>
                    <button type="button" id="tab-meta-button" role="tab" aria-controls="tab-meta" aria-selected="false" class="mini-tab" data-tab="tab-meta">4. SETTINGS</button>
                </div>

                <!-- WHO Section -->
                <div class="profile-tab-content active" id="tab-who" role="tabpanel" aria-labelledby="tab-who-button" tabindex="0">
                    <h3>Target Entities</h3>
                    <p class="text-xs text-muted mb-4">Select who is eligible for this commission profile.</p>
                    <div class="blocks-form-field payout-form-group">
                        <label>Eligibility Type</label>
                        <select name="who_type" class="blocks-input payout-select" id="who-type-select">
                            <option value="all">All Users</option>
                            <option value="users">Specific User IDs</option>
                            <option value="ranks">Specific Ranks</option>
                        </select>
                    </div>
                    <div class="payout-form-group" id="who-list-container" style="display:none;">
                        <label id="who-list-label">Recipient List</label>
                        <div id="who-multiselect-widget" class="payout-multiselect-widget">
                            <div class="payout-multiselect-search">
                                <i class="fas fa-search"></i>
                            <input type="text" class="blocks-input" placeholder="Search recipients..." id="who-search-input">
                            </div>
                            <div id="who-list-options" class="payout-multiselect-options">
                                <!-- Dynamic options here -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- WHEN Section -->
                <div class="profile-tab-content" id="tab-when" role="tabpanel" aria-labelledby="tab-when-button" tabindex="0">
                    <h3>Eligibility Criteria (WHEN)</h3>
                    <p class="text-xs text-muted mb-4">Define conditions that must be met for this profile to apply.</p>
                    <div id="when-builder" class="query-builder">
                        <!-- Dynamic rows here -->
                    </div>
                    <button type="button" class="blocks-button blocks-button-secondary mt-2 text-xs" id="add-when-cond">+ Add Condition</button>
                </div>

                <!-- HOW Section -->
                <div class="profile-tab-content" id="tab-how" role="tabpanel" aria-labelledby="tab-how-button" tabindex="0">
                    <h3>Amount Resolution (HOW MUCH)</h3>
                    <p class="text-xs text-muted mb-4">Define how the commission amount is calculated. You can have multiple tiers.</p>
                    <div id="how-builder" class="query-builder">
                        <!-- Dynamic rows here -->
                    </div>
                    <button type="button" class="blocks-button blocks-button-secondary mt-2 text-xs" id="add-how-rule">+ Add Resolution Rule</button>
                    <div class="mt-4 p-3 highlight-box text-xs">
                        <strong>Tip:</strong> You can set "Flat" or "Percentage" commissions based on Ranks, Dates, or Username.
                    </div>
                </div>

                <!-- SETTINGS Section -->
                <div class="profile-tab-content" id="tab-meta" role="tabpanel" aria-labelledby="tab-meta-button" tabindex="0">
                    <div class="payout-form-row">
                        <div class="blocks-form-field payout-form-group">
                            <label>Profile Name</label>
                            <input type="text" name="name" class="blocks-input payout-input" placeholder="e.g. Festive Bonus Tier" required>
                        </div>
                    </div>
                    <div class="payout-form-row two-cols">
                        <div class="blocks-form-field payout-form-group">
                            <label>Priority (Higher = executes first)</label>
                            <input type="number" name="priority" class="blocks-input payout-input" value="10">
                        </div>
                        <div class="blocks-form-field payout-form-group">
                            <label>Status</label>
                            <div class="flex items-center gap-2 mt-2">
                                <input type="checkbox" name="is_active" checked id="profile-active-check">
                                <label for="profile-active-check" class="m-0">Active</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer flex-between">
                <div>
                    <button type="button" class="blocks-button blocks-button-secondary" data-modal-close>Cancel</button>
                </div>
                <div class="flex gap-2">
                    <button type="button" class="blocks-button blocks-button-secondary" id="prev-step" style="display:none;"><i class="fas fa-chevron-left"></i> Back</button>
                    <button type="button" class="blocks-button blocks-button-primary" id="next-step">Next <i class="fas fa-chevron-right"></i></button>
                    <button type="submit" class="blocks-button blocks-button-primary" id="save-profile-btn" style="display:none;"><i class="fas fa-save"></i> Save Profile</button>
                </div>
            </div>
        </form>
    </div>
</div>


{% endblock %}

{% block scripts %}
<script src="/plugins/payout/assets/js/payout_list.js"></script>
<script src="/plugins/payout/assets/payout.js" defer></script>
{% endblock %}