{% extends 'superuser/base_superuser.html' %}

{% block title %}Clients | Superuser Console{% endblock %}
{% block clients_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Client Management</h2>
        <p class="page-subtitle">Manage registered clients and their connected pages.</p>
    </div>
    <div style="display: flex; gap: 0.5rem;">
        <button id="btn-test-all-fb" class="btn btn-secondary" style="border-color: #3b82f6; color: #3b82f6;">
            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            Test All FB Connections
        </button>
        <a href="{% url 'superuser_company_create' %}" class="btn btn-primary">
            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Add Client
        </a>
    </div>
</div>

<div style="margin-bottom: 1.5rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between;">
    <div style="position: relative; flex: 1; max-width: 400px;">
        <form method="get" action="" style="margin: 0; padding: 0; display: flex;">
            <input type="text" name="q" id="client-search-input" class="form-input" placeholder="Search clients..." style="width: 100%; padding-left: 2.5rem; border-radius: 0;" value="{{ search_query|default:'' }}">
            <svg width="18" height="18" fill="none" stroke="var(--text-muted)" viewBox="0 0 24 24" style="position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
        </form>
    </div>
</div>

<div class="glass-card" style="padding: 1.75rem;">
    {% if companies %}
        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th style="width: 50px;">#</th>
                        <th>Client Name</th>
                        <th>Connected Page</th>
                        <th>Subscription Status</th>
                        <th>Set Limit</th>
                        <th>Usage (Spent / Left)</th>
                        <th style="text-align: center;">FB Connect Test</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for company in companies %}
                        <tr class="client-row">
                            <td style="color: var(--text-muted);">{{ forloop.counter }}</td>
                            <td class="client-name-cell" style="font-weight: 600; color: var(--text-primary);">{{ company.name }}</td>
                            <td>
                                {% if company.fb_messenger_enabled and company.fb_page_id %}
                                    <span class="badge" style="background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.2);">FB Page ID: {{ company.fb_page_id }}</span>
                                {% elif company.whatsapp_enabled and company.wa_phone_number_id %}
                                    <span class="badge" style="background: rgba(34, 197, 94, 0.1); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.2);">WA Phone: {{ company.wa_phone_number_id }}</span>
                                {% elif company.allowed_domain %}
                                    <span class="badge" style="background: rgba(139, 92, 246, 0.1); color: #8b5cf6; border: 1px solid rgba(139, 92, 246, 0.2);">Web: {{ company.allowed_domain }}</span>
                                {% else %}
                                    <span style="color: var(--text-muted); font-size: 0.85rem;">Not Connected</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if company.subscription_valid_until %}
                                    {% if company.subscription_valid_until < today %}
                                        <span class="badge" style="background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2);">Expired ({{ company.subscription_valid_until }})</span>
                                    {% else %}
                                        <span class="badge" style="background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2);">Active (Expires {{ company.subscription_valid_until }})</span>
                                    {% endif %}
                                {% else %}
                                    <span class="badge" style="background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.2);">No Validation Date</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if company.message_limit > 0 %}
                                    <span class="badge" style="background: rgba(99, 102, 241, 0.1); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.2);">{{ company.message_limit }}</span>
                                {% else %}
                                    <span class="badge" style="background: rgba(255, 255, 255, 0.05); color: var(--text-muted); border: 1px solid var(--border-color);">Unlimited</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if company.message_limit > 0 %}
                                    <span style="font-size: 0.9rem; font-weight: 500;">
                                        {{ company.message_count }} / 
                                        {% if company.message_remaining == 0 %}
                                            <span style="color: var(--danger); font-weight: 700;">0 (Exhausted)</span>
                                        {% else %}
                                            <span style="color: var(--success);">{{ company.message_remaining }}</span>
                                        {% endif %}
                                    </span>
                                {% else %}
                                    <span style="font-size: 0.9rem; color: var(--text-muted);">{{ company.message_count }} / Unlimited</span>
                                {% endif %}
                            </td>
                            <td style="text-align: center;">
                                {% if company.fb_messenger_enabled and company.fb_page_id %}
                                    <button onclick="testSingleFB({{ company.id }})" class="btn btn-secondary" style="padding: 0.2rem 0.5rem; font-size: 0.75rem; border-color: #3b82f6; color: #3b82f6;" id="fb-test-btn-{{ company.id }}">
                                        Test FB
                                    </button>
                                {% else %}
                                    <span style="color: var(--text-muted); font-size: 0.75rem;">N/A</span>
                                {% endif %}
                            </td>
                            <td style="text-align: right;">
                                <div style="display: inline-flex; gap: 0.5rem; align-items: center;">
                                    <a href="{% url 'superuser_company_test' company.pk %}" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; gap: 0.25rem; border-color: rgba(99, 102, 241, 0.3); color: var(--primary);" title="Test Bot Connection">
                                        Test
                                    </a>
                                    <a href="{% url 'superuser_company_edit' company.pk %}" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; gap: 0.25rem;">
                                        Edit
                                    </a>
                                    <form action="{% url 'superuser_company_delete' company.pk %}" method="post" onsubmit="return confirm('Are you sure you want to delete this client? All data will be lost.');" style="display: inline;">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; gap: 0.25rem; color: var(--danger); border-color: rgba(239, 68, 68, 0.2);">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div style="text-align: center; padding: 4rem 2rem; color: var(--text-secondary);">
            <div style="font-size: 3rem; margin-bottom: 1.5rem;">[ ]</div>
            <h4 style="margin-bottom: 0.5rem;">No Clients Found</h4>
            <p style="font-size: 0.9rem; margin-bottom: 1.5rem; color: var(--text-muted);">Get started by creating your first client.</p>
            <a href="{% url 'superuser_company_create' %}" class="btn btn-primary">New Client</a>
        </div>
    {% endif %}
</div>

<!-- Modal for Test Report -->
<div id="fb-test-modal" class="modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
    <div class="glass-card" style="width: 100%; max-width: 600px; padding: 2rem; position: relative;">
        <button onclick="closeModal()" style="position: absolute; right: 1rem; top: 1rem; background: none; border: none; cursor: pointer; font-size: 1.5rem; color: var(--text-muted);">&times;</button>
        <h3 style="margin-bottom: 1.5rem;">Facebook Connection Report</h3>
        <div id="fb-test-report-content" style="max-height: 400px; overflow-y: auto;">
            <!-- Report items injected here -->
        </div>
        <div style="text-align: right; margin-top: 1.5rem;">
            <button onclick="closeModal()" class="btn btn-primary">Close</button>
        </div>
    </div>
</div>

<script>
    function closeModal() {
        document.getElementById('fb-test-modal').style.display = 'none';
    }

    async function testSingleFB(companyId) {
        const btn = document.getElementById(`fb-test-btn-${companyId}`);
        const originalText = btn.innerHTML;
        btn.innerHTML = 'Testing...';
        btn.disabled = true;

        try {
            const response = await fetch(`/superuser/clients/${companyId}/test-fb/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                }
            });
            const data = await response.json();
            
            if (data.status === 'success') {
                alert(`SUCCESS: ${data.message}`);
            } else if (data.status === 'warning') {
                alert(`WARNING: ${data.message}`);
            } else {
                alert(`ERROR: ${data.message}`);
            }
        } catch (err) {
            alert(`Error connecting to server: ${err.message}`);
        } finally {
            btn.innerHTML = originalText;
            btn.disabled = false;
        }
    }

    document.getElementById('btn-test-all-fb')?.addEventListener('click', async function() {
        const btn = this;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Testing...';
        btn.disabled = true;

        const reportContent = document.getElementById('fb-test-report-content');
        reportContent.innerHTML = '<div style="text-align: center; color: var(--text-muted); padding: 2rem;">Testing all configured Facebook connections. Please wait...</div>';
        document.getElementById('fb-test-modal').style.display = 'flex';

        try {
            const response = await fetch("{% url 'superuser_test_all_fb' %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                }
            });
            const data = await response.json();
            
            if (data.results && data.results.length > 0) {
                let html = '<div style="display: flex; flex-direction: column; gap: 0.75rem;">';
                data.results.forEach(res => {
                    let badgeColor = res.status === 'success' ? 'var(--success)' : (res.status === 'warning' ? 'var(--warning)' : 'var(--danger)');
                    let badgeBg = res.status === 'success' ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)';
                    html += `
                        <div style="padding: 1rem; border: 1px solid var(--border-color); border-radius: 8px; background: rgba(255,255,255,0.02); display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <h4 style="margin: 0 0 0.25rem 0; font-size: 1rem;">${res.name}</h4>
                                <p style="margin: 0; font-size: 0.85rem; color: var(--text-muted);">${res.message}</p>
                            </div>
                            <span class="badge" style="background: ${badgeBg}; color: ${badgeColor}; border: 1px solid ${badgeColor}33;">
                                ${res.status.toUpperCase()}
                            </span>
                        </div>
                    `;
                });
                html += '</div>';
                reportContent.innerHTML = html;
            } else {
                reportContent.innerHTML = '<div style="padding: 1rem; color: var(--text-muted);">No Facebook configured clients found.</div>';
            }

        } catch (err) {
            reportContent.innerHTML = `<div style="color: var(--danger); padding: 1rem;">Error connecting to server: ${err.message}</div>`;
        } finally {
            btn.innerHTML = originalText;
            btn.disabled = false;
        }
    });
    // Client-side search filtering
    document.getElementById('client-search-input')?.addEventListener('keyup', function() {
        const query = this.value.toLowerCase().trim();
        const rows = document.querySelectorAll('.client-row');
        rows.forEach(row => {
            const clientName = row.querySelector('.client-name-cell')?.textContent.toLowerCase() || '';
            if (clientName.includes(query)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });
</script>
{% endblock %}