{% extends "base.html" %}

{% block title %}WhatsApp Delivery{% endblock %}
{% block page_id %}whatsapp{% endblock %}
{% block page_title %}New WhatsApp{% endblock %}
{% block eyebrow %}Delivery{% endblock %}

{% block head %}
<style>
/* Predictive Search Dropdown Styles */
.search-container {
    position: relative;
    z-index: 100;
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #cbd5e1;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: none;
    margin-top: -1px;
}

.search-dropdown.active {
    display: block;
}

.search-result-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background 0.15s;
}

.search-result-item:hover {
    background: #f8fafc;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.search-result-avatar-fallback {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #2c7da0, #1a5f7a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
}

.search-result-details {
    font-size: 0.75rem;
    color: #64748b;
}

.search-result-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-matched {
    background: #dcfce7;
    color: #16a34a;
}

.badge-no-match {
    background: #f1f5f9;
    color: #64748b;
}

.search-no-results {
    padding: 1.5rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
}

.search-loading {
    padding: 1rem;
    text-align: center;
    color: #64748b;
    font-size: 0.85rem;
}

/* User Photo Display */
.user-photo {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid #e2e8f0;
}

.user-photo-fallback {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2c7da0, #1a5f7a);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 2rem;
    border: 2px solid #e2e8f0;
}

/* Ensure proper stacking context */
.panel-stack {
    position: relative;
}

.glass-card {
    position: relative;
    z-index: 1;
}

.glass-card.search-active {
    z-index: 101;
}
</style>
{% endblock %}

{% block content %}
<section class="panel-stack">

    <!-- Two-column layout matching Email page -->
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">

        <!-- STEP 1: Fetch existing user -->
        <article class="glass-card panel-card" id="searchCard">
            <div class="panel-header">
                <div>
                    <p class="eyebrow">STEP 1</p>
                    <h3>Fetch existing user</h3>
                </div>
            </div>

            <div style="margin-top: 1.5rem;">
                <label style="display: block; font-weight: 600; font-size: 0.85rem; color: #475569; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;">
                    NAME / EMAIL / MOBILE <span style="color: #dc2626;">*</span>
                </label>

                <div style="display: flex; gap: 0.75rem;">
                    <div class="search-container" style="flex: 1;">
                        <input
                            type="text"
                            id="whatsappSearchInput"
                            placeholder="Type name, email or mobile number"
                            style="width: 100%; padding: 0.75rem 1rem; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.95rem; background: white;"
                            autocomplete="off"
                        >

                        <!-- Predictive Search Dropdown -->
                        <div id="searchDropdown" class="search-dropdown"></div>
                    </div>

                    <button
                        onclick="manualFetch()"
                        class="primary-btn"
                        style="padding: 0.75rem 2rem; white-space: nowrap; background: #2c7da0;"
                    >
                        Fetch
                    </button>
                </div>
            </div>

            <!-- User details display (hidden initially) -->
            <div id="whatsappUserDetails" style="display: none; margin-top: 1.5rem; padding: 1.25rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;">
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <div id="wUserPhotoContainer"></div>
                    <div style="flex: 1;">
                        <div id="wUserName" style="font-weight: 700; color: #0f172a; font-size: 1.1rem; margin-bottom: 0.25rem;"></div>
                        <div id="wUserEmail" style="font-size: 0.85rem; color: #64748b; margin-bottom: 0.15rem;"></div>
                        <div id="wUserPhone" style="font-size: 0.85rem; color: #64748b;"></div>
                    </div>
                    <button
                        onclick="resendWhatsApp()"
                        id="btnResend"
                        style="padding: 0.5rem 1.25rem; background: white; border: 1px solid #cbd5e1; border-radius: 8px; color: #5b21b6; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem;"
                    >
                        <span style="font-size: 1rem;">↻</span> Resend
                    </button>
                </div>
                <input type="hidden" id="wUserId">
                <input type="hidden" id="wUserToken">
            </div>
        </article>

        <!-- STEP 2: Send gallery to user -->
        <article class="glass-card panel-card">
            <div class="panel-header">
                <div>
                    <p class="eyebrow">STEP 2</p>
                    <h3>Send gallery via WhatsApp</h3>
                </div>
            </div>

            <div style="margin-top: 1.5rem;">
                <label style="display: block; font-weight: 600; font-size: 0.85rem; color: #475569; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;">
                    MOBILE NUMBER <span style="color: #dc2626;">*</span>
                </label>

                <div style="display: flex; gap: 0.75rem;">
                    <input
                        type="text"
                        id="wSendMobile"
                        placeholder="Enter mobile number (919876543210)"
                        style="flex: 1; padding: 0.75rem 1rem; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.95rem; background: white;"
                    >
                    <button
                        onclick="sendWhatsAppMessage()"
                        id="btnSendWhatsApp"
                        class="primary-btn"
                        style="padding: 0.75rem 2rem; white-space: nowrap; background: #16a34a;"
                    >
                        Send
                    </button>
                </div>

                <p style="font-size: 0.8rem; color: #64748b; margin-top: 0.75rem;">
                    Reuses existing gallery WhatsApp flow. Message is sent instantly.
                </p>
            </div>

            <!-- Status message -->
            <div id="whatsappStatus" style="display: none; margin-top: 1.5rem; padding: 1rem; border-radius: 8px; text-align: center; font-weight: 600;"></div>
        </article>

    </div>

    <!-- Recent WhatsApp Logs -->
    <article class="glass-card panel-card">
        <div class="panel-header">
            <div>
                <p class="eyebrow">History</p>
                <h3>Recent WhatsApp Deliveries</h3>
            </div>
        </div>

        <div style="overflow-x: auto; margin-top: 1.5rem;">
            <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem;">
                <thead>
                    <tr style="border-bottom: 2px solid #e2e8f0;">
                        <th style="padding: 0.75rem; text-align: left; font-weight: 600; color: #64748b; text-transform: uppercase; font-size: 0.75rem;">UID</th>
                        <th style="padding: 0.75rem; text-align: left; font-weight: 600; color: #64748b; text-transform: uppercase; font-size: 0.75rem;">Name</th>
                        <th style="padding: 0.75rem; text-align: left; font-weight: 600; color: #64748b; text-transform: uppercase; font-size: 0.75rem;">Mobile</th>
                        <th style="padding: 0.75rem; text-align: left; font-weight: 600; color: #64748b; text-transform: uppercase; font-size: 0.75rem;">Status</th>
                        <th style="padding: 0.75rem; text-align: left; font-weight: 600; color: #64748b; text-transform: uppercase; font-size: 0.75rem;">Sent At</th>
                    </tr>
                </thead>
                <tbody>
                {% if logs %}
                    {% for log in logs %}
                    <tr style="border-bottom: 1px solid #f1f5f9;">
                        <td style="padding: 0.75rem; color: #64748b; font-weight: 600;">#{{ log.user_id }}</td>
                        <td style="padding: 0.75rem; color: #0f172a; font-weight: 500;">{{ log.name or '—' }}</td>
                        <td style="padding: 0.75rem; color: #64748b;">{{ log.mobile }}</td>
                        <td style="padding: 0.75rem;">
                            {% if log.status == 'sent' %}
                                <span style="padding: 0.25rem 0.75rem; background: #dcfce7; color: #16a34a; border-radius: 20px; font-size: 0.75rem; font-weight: 600;">SENT</span>
                            {% elif log.status == 'failed' %}
                                <span style="padding: 0.25rem 0.75rem; background: #fee2e2; color: #dc2626; border-radius: 20px; font-size: 0.75rem; font-weight: 600;">FAILED</span>
                            {% else %}
                                <span style="padding: 0.25rem 0.75rem; background: #f1f5f9; color: #64748b; border-radius: 20px; font-size: 0.75rem; font-weight: 600;">PENDING</span>
                            {% endif %}
                        </td>
                        <td style="padding: 0.75rem; color: #64748b; font-size: 0.85rem;">{{ log.sent_at.strftime('%b %d, %H:%M') if log.sent_at else '—' }}</td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="5" style="padding: 2rem; text-align: center; color: #94a3b8;">No WhatsApp deliveries yet</td>
                    </tr>
                {% endif %}
                </tbody>
            </table>
        </div>
    </article>

</section>
{% endblock %}

{% block scripts %}
<script>
// Debounce function for search
let searchTimeout = null;

const searchInput = document.getElementById('whatsappSearchInput');
const searchDropdown = document.getElementById('searchDropdown');
const userDetails = document.getElementById('whatsappUserDetails');
const searchCard = document.getElementById('searchCard');

// INSTANT predictive search - starts from 1 character
searchInput.addEventListener('input', function() {
    const query = this.value.trim();

    // Clear previous timeout
    if (searchTimeout) {
        clearTimeout(searchTimeout);
    }

    // Hide dropdown if empty
    if (query.length === 0) {
        searchDropdown.classList.remove('active');
        searchCard.classList.remove('search-active');
        searchDropdown.innerHTML = '';
        return;
    }

    // Show loading state
    searchDropdown.classList.add('active');
    searchCard.classList.add('search-active');
    searchDropdown.innerHTML = '<div class="search-loading">Searching...</div>';

    // Debounce search (wait 200ms after user stops typing)
    searchTimeout = setTimeout(() => {
        performSearch(query);
    }, 200);
});

function performSearch(query) {
    fetch('/admin/api/fetch_user?q=' + encodeURIComponent(query))
    .then(r => r.json())
    .then(users => {
        if (!users || users.length === 0) {
            searchDropdown.innerHTML = '<div class="search-no-results">No users found</div>';
            return;
        }

        // Build dropdown HTML
        let html = '';
        users.forEach(user => {
            const initial = user.name.charAt(0).toUpperCase();
            const photoUrl = user.s3_image_url || user.image_url || '';
            const matchBadge = user.match_count > 0
                ? '<span class="search-result-badge badge-matched">MATCHED</span>'
                : '<span class="search-result-badge badge-no-match">NO MATCH</span>';

            // Use actual photo if available, otherwise fallback to initial
            const avatarHtml = photoUrl
                ? `<img src="${photoUrl}" class="search-result-avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                   <div class="search-result-avatar-fallback" style="display:none;">${initial}</div>`
                : `<div class="search-result-avatar-fallback">${initial}</div>`;

            html += `
                <div class="search-result-item" onclick='selectUser(${JSON.stringify(user)})'>
                    ${avatarHtml}
                    <div class="search-result-info">
                        <div class="search-result-name">${user.name}</div>
                        <div class="search-result-details">
                            ${user.email || '—'} • ${user.phone || '—'}
                        </div>
                    </div>
                    ${matchBadge}
                </div>
            `;
        });

        searchDropdown.innerHTML = html;
    })
    .catch(err => {
        searchDropdown.innerHTML = '<div class="search-no-results">Error: ' + err.message + '</div>';
    });
}

function manualFetch() {
    const query = searchInput.value.trim();
    if (!query) {
        alert('Please enter a search term');
        return;
    }
    performSearch(query);
}

function selectUser(user) {
    // Hide dropdown
    searchDropdown.classList.remove('active');
    searchCard.classList.remove('search-active');

    // Clear search input
    searchInput.value = user.name;

    // Fill user details
    document.getElementById('wUserId').value = user.id;
    document.getElementById('wUserToken').value = user.access_token || '';
    document.getElementById('wUserName').textContent = user.name;
    document.getElementById('wUserEmail').textContent = user.email || '—';
    document.getElementById('wUserPhone').textContent = user.phone || '—';
    document.getElementById('wSendMobile').value = user.phone || '';

    // Display user photo
    const photoContainer = document.getElementById('wUserPhotoContainer');
    const photoUrl = user.s3_image_url || user.image_url || '';
    const initial = user.name.charAt(0).toUpperCase();

    if (photoUrl) {
        photoContainer.innerHTML = `
            <img src="${photoUrl}" class="user-photo" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
            <div class="user-photo-fallback" style="display:none;">${initial}</div>
        `;
    } else {
        photoContainer.innerHTML = `<div class="user-photo-fallback">${initial}</div>`;
    }

    // Show user details
    userDetails.style.display = 'block';
    document.getElementById('whatsappStatus').style.display = 'none';
}

// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
    if (!searchInput.contains(e.target) && !searchDropdown.contains(e.target)) {
        searchDropdown.classList.remove('active');
        searchCard.classList.remove('search-active');
    }
});

// Resend WhatsApp function
function resendWhatsApp() {
    const mobile = document.getElementById('wSendMobile').value.trim();
    if (!mobile) {
        alert('Mobile number not found for this user');
        return;
    }

    if (confirm('Resend WhatsApp to ' + mobile + '?')) {
        sendWhatsAppMessage();
    }
}

function sendWhatsAppMessage() {
    const userId = document.getElementById('wUserId').value;
    const mobile = document.getElementById('wSendMobile').value.trim();
    const token = document.getElementById('wUserToken').value;
    const status = document.getElementById('whatsappStatus');
    const btn = document.getElementById('btnSendWhatsApp');

    if (!userId) {
        alert('Please search and select a user first (Step 1)');
        return;
    }

    if (!mobile) {
        alert('Please enter a mobile number');
        return;
    }

    if (!token) {
        alert('User has no access token. Cannot send WhatsApp.');
        return;
    }

    btn.disabled = true;
    btn.textContent = 'Sending...';
    status.style.display = 'none';

    const fd = new FormData();
    fd.append('user_id', userId);
    fd.append('mobile', mobile);

    fetch('/admin/api/whatsapp/send', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(data => {
        btn.disabled = false;
        btn.textContent = 'Send';
        status.style.display = 'block';

        if (data.success) {
            status.style.cssText = 'display:block; margin-top:1.5rem; padding:1rem; border-radius:8px; text-align:center; font-weight:600; background:#dcfce7; color:#16a34a; border:2px solid #86efac;';
            status.innerHTML = '✓ WhatsApp sent successfully to ' + mobile;

            // Reload after 2 seconds to show in logs
            setTimeout(() => location.reload(), 2000);
        } else {
            status.style.cssText = 'display:block; margin-top:1.5rem; padding:1rem; border-radius:8px; text-align:center; font-weight:600; background:#fee2e2; color:#dc2626; border:2px solid #fca5a5;';
            status.innerHTML = '✗ Failed: ' + (data.message || data.error || 'Unknown error');
        }
    })
    .catch(err => {
        btn.disabled = false;
        btn.textContent = 'Send';
        status.style.display = 'block';
        status.style.cssText = 'display:block; margin-top:1.5rem; padding:1rem; border-radius:8px; text-align:center; font-weight:600; background:#fee2e2; color:#dc2626; border:2px solid #fca5a5;';
        status.innerHTML = '✗ Network error: ' + err.message;
    });
}

// Allow Enter key in mobile input
document.getElementById('wSendMobile').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        sendWhatsAppMessage();
    }
});
</script>
{% endblock %}