{% extends "contacts_base.html" %}

{% block title %}Pending Contacts - mc-webui{% endblock %}

{% block page_content %}
<div id="pendingPageContent" class="p-3">
    <!-- Page Header -->
    <div class="mb-3">
        <h4 class="mb-2">
            <i class="bi bi-hourglass-split"></i> Pending Contacts
            <span class="badge bg-primary rounded-pill" id="pendingCountBadge" style="display: none; font-size: 0.8rem;">0</span>
        </h4>
    </div>

    <!-- Action Buttons -->
    <div class="d-flex gap-2 mb-3">
        <button class="btn btn-outline-secondary btn-sm" onclick="navigateTo('/contacts/manage');">
            <i class="bi bi-arrow-left"></i> Back
        </button>
        <button class="btn btn-outline-primary btn-sm" id="refreshPendingBtn">
            <i class="bi bi-arrow-clockwise"></i> Refresh
        </button>
    </div>

    <!-- Filter Toolbar -->
    <div class="mb-3">
        <div class="card">
            <div class="card-body p-3">
                <h6 class="mb-2">
                    <i class="bi bi-funnel"></i> Filters
                    <i class="bi bi-info-circle text-muted ms-1" role="button" tabindex="0"
                       data-bs-toggle="tooltip" data-bs-placement="right"
                       title="Filter contacts by type or name, then approve or ignore them in bulk."></i>
                </h6>

                <!-- Type Filter Badges -->
                <div class="d-flex flex-wrap gap-2 mb-2">
                    <span class="type-filter-badge active" data-type="CLI" id="typeFilterCLI">CLI</span>
                    <span class="type-filter-badge" data-type="REP" id="typeFilterREP">REP</span>
                    <span class="type-filter-badge" data-type="ROOM" id="typeFilterROOM">ROOM</span>
                    <span class="type-filter-badge" data-type="SENS" id="typeFilterSENS">SENS</span>
                </div>

                <!-- Search + Batch Action Buttons -->
                <div class="d-flex gap-2">
                    <input type="text" class="form-control form-control-sm" id="pendingSearchInput"
                           placeholder="Search..." style="min-width: 0;">
                    <button class="btn btn-success btn-sm flex-shrink-0" id="addFilteredBtn">
                        <i class="bi bi-check-circle-fill"></i> Approve
                    </button>
                    <button class="btn btn-outline-secondary btn-sm flex-shrink-0" id="ignoreFilteredBtn">
                        <i class="bi bi-eye-slash"></i> Ignore
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading State -->
    <div id="pendingLoading" class="text-center py-5" style="display: none;">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <p class="mt-3 text-muted">Loading pending contacts...</p>
    </div>

    <!-- Empty State -->
    <div id="pendingEmpty" class="empty-state" style="display: none;">
        <i class="bi bi-check-circle"></i>
        <p class="mb-0">No pending requests</p>
        <small class="text-muted">New contact requests will appear here when manual approval is enabled</small>
    </div>

    <!-- Pending Contacts List (Full-screen) -->
    <div id="pendingList" class="contacts-list-fullscreen">
        <!-- Dynamically populated by contacts.js -->
    </div>

    <!-- Error State -->
    <div id="pendingError" class="alert alert-danger" style="display: none;" role="alert">
        <i class="bi bi-exclamation-triangle"></i>
        <span id="pendingErrorMessage">Failed to load pending contacts</span>
    </div>
</div>

<!-- Batch Approval Confirmation Modal -->
<div class="modal fade" id="batchApprovalModal" tabindex="-1" aria-labelledby="batchApprovalModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="batchApprovalModalLabel">
                    <i class="bi bi-check-circle"></i> Confirm Batch Approval
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-2">You are about to approve <strong id="batchApprovalCount">0</strong> contacts:</p>

                <!-- List of contacts to approve -->
                <div class="list-group mb-3" id="batchApprovalList" style="max-height: 300px; overflow-y: auto;">
                    <!-- Populated dynamically by JavaScript -->
                </div>

                <div class="alert alert-info mb-0">
                    <i class="bi bi-info-circle"></i> These contacts will be added to your device and can receive/send messages.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="confirmBatchApprovalBtn">
                    <i class="bi bi-check-circle-fill"></i> Approve All
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Batch Ignore Confirmation Modal -->
<div class="modal fade" id="batchIgnoreModal" tabindex="-1" aria-labelledby="batchIgnoreModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-secondary text-white">
                <h5 class="modal-title" id="batchIgnoreModalLabel">
                    <i class="bi bi-eye-slash"></i> Confirm Batch Ignore
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-2">You are about to ignore <strong id="batchIgnoreCount">0</strong> contacts:</p>

                <div class="list-group mb-3" id="batchIgnoreList" style="max-height: 300px; overflow-y: auto;">
                </div>

                <div class="alert alert-warning mb-0">
                    <i class="bi bi-info-circle"></i> Ignored contacts will not trigger new pending requests. You can unignore them later from the Existing Contacts page.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-outline-secondary" id="confirmBatchIgnoreBtn">
                    <i class="bi bi-eye-slash"></i> Ignore All
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}