{% 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-3"><i class="bi bi-funnel"></i> Filters</h6>

                <!-- Name Search -->
                <div class="mb-3">
                    <input type="text" class="form-control" id="pendingSearchInput"
                           placeholder="Search by name or public key...">
                </div>

                <!-- Type Filter Badges -->
                <div class="mb-3">
                    <label class="form-label small text-muted">Contact Types:</label>
                    <div class="d-flex flex-wrap gap-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>
                </div>

                <!-- Batch Approval Button -->
                <div class="d-flex gap-2">
                    <button class="btn btn-success flex-grow-1" id="addFilteredBtn">
                        <i class="bi bi-check-circle-fill"></i> Add Filtered
                        <span class="badge bg-light text-dark ms-2" id="filteredCountBadge">0</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Page Description -->
    <div class="mb-3">
        <p class="text-muted small mb-0">
            <i class="bi bi-info-circle"></i>
            Approve or reject contacts waiting for manual approval.
        </p>
    </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>
{% endblock %}