{% extends "base.html" %}

{% block title %}Clients - Fixture Manager{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Connected Clients</h1>
    <div class="d-flex gap-1">
        <span class="badge badge-success" style="background-color: #28a745; color: white;">Online</span>
        <span class="badge badge-secondary" style="background-color: #6c757d; color: white;">Offline</span>
    </div>
</div>

<!-- Filter and Search Controls -->
<div class="card mb-4">
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-6">
                <div class="input-group">
                    <input type="text"
                           class="form-control"
                           placeholder="Search clients by name, username, RustDesk ID, or IP..."
                           value="{{ search_query if search_query else '' }}"
                           id="searchInput">
                    <button class="btn btn-primary" type="button" id="searchButton">
                        Search
                    </button>
                    {% if search_query %}
                    <button class="btn btn-outline-secondary" type="button" id="clearSearchButton">
                        Clear
                    </button>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-4">
                <select class="form-select" id="statusFilter">
                    <option value="">All Clients</option>
                    <option value="online" {% if status_filter == 'online' %}selected{% endif %}>Online Only</option>
                    <option value="offline" {% if status_filter == 'offline' %}selected{% endif %}>Offline Only</option>
                </select>
            </div>
            <div class="col-md-2">
                <button class="btn btn-outline-primary w-100" type="button" id="resetFilterButton">
                    Reset
                </button>
            </div>
        </div>
    </div>
</div>

<div class="alert alert-info">
    <strong>Client Status:</strong> Clients are considered online if they've sent a request to the API in the last 30 minutes.
    Use the filters above to show only online clients, only offline clients, or search for specific clients by name, username, RustDesk ID, or IP address.
</div>

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Client Name</th>
                <th>RustDesk ID</th>
                <th>Status</th>
                <th>Last Seen</th>
                <th>Remote Link</th>
                <th>IP Address</th>
                <th>User Agent</th>
            </tr>
        </thead>
        <tbody>
            {% if clients %}
                {% for client in clients %}
                    <tr class="{% if client.is_online %}table-success{% else %}table-secondary{% endif %}">
                        <td>
                            <strong>{{ client.token_name }}</strong>
                            <br><small class="text-muted">{{ client.username }}</small>
                        </td>
                        <td>
                            <code>{{ client.rustdesk_id }}</code>
                        </td>
                        <td>
                            {% if client.is_online %}
                                <span class="badge badge-success" style="background-color: #28a745; color: white;">Online</span>
                            {% else %}
                                <span class="badge badge-secondary" style="background-color: #6c757d; color: white;">Offline</span>
                            {% endif %}
                        </td>
                        <td>
                            {{ client.last_seen_formatted }}
                            <br><small class="text-muted">{{ client.last_seen_ago }}</small>
                        </td>
                        <td>
                            {% if client.is_online %}
                                <a href="https://{{ client.rustdesk_id }}.remote.{{ client.remote_domain }}" 
                                   target="_blank" 
                                   class="btn btn-sm btn-primary">
                                    Connect
                                </a>
                            {% else %}
                                <span class="text-muted">Not available</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if client.ip_address %}
                                <code>{{ client.ip_address }}</code>
                            {% else %}
                                <span class="text-muted">Unknown</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if client.user_agent %}
                                <small class="text-muted">{{ client.user_agent[:50] }}{% if client.user_agent|length > 50 %}...{% endif %}</small>
                            {% else %}
                                <span class="text-muted">Unknown</span>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            {% else %}
                <tr>
                    <td colspan="7" class="text-center text-muted">
                        No clients found. Clients will appear here when they connect to the API.
                    </td>
                </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<div class="mt-2 text-muted">
    <small>
        <strong>Note:</strong> The remote link format is: https://{rustdesk_id}.remote.{remote_domain}
        <br>Default remote domain: townshipscombatleague.com (configurable in admin settings)
    </small>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .badge {
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: bold;
    }

    .table-success {
        background-color: rgba(40, 167, 69, 0.1) !important;
    }

    .table-secondary {
        background-color: rgba(108, 117, 125, 0.1) !important;
    }

    code {
        background-color: #f8f9fa;
        padding: 2px 4px;
        border-radius: 3px;
        font-size: 0.9em;
    }

    /* Filter card styling */
    .card {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .card-body {
        padding: 1.5rem;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Clients page JavaScript loaded');

    // Get URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    const currentSearch = urlParams.get('search') || '';
    const currentStatus = urlParams.get('status') || '';

    console.log('Current search:', currentSearch);
    console.log('Current status filter:', currentStatus);

    // Set initial values
    const searchInput = document.getElementById('searchInput');
    const statusFilter = document.getElementById('statusFilter');

    if (searchInput) searchInput.value = currentSearch;
    if (statusFilter) statusFilter.value = currentStatus;

    // Function to build URL with filters
    function buildFilterUrl() {
        const searchQuery = searchInput ? searchInput.value.trim() : '';
        const statusValue = statusFilter ? statusFilter.value : '';

        let url = '{{ url_for("main.clients") }}?';
        if (searchQuery) {
            url += 'search=' + encodeURIComponent(searchQuery) + '&';
        }
        if (statusValue) {
            url += 'status=' + encodeURIComponent(statusValue) + '&';
        }

        // Remove trailing & or ?
        url = url.replace(/[&?]$/, '');
        return url;
    }

    // Search functionality
    if (document.getElementById('searchButton')) {
        document.getElementById('searchButton').addEventListener('click', function() {
            console.log('Search button clicked');
            window.location.href = buildFilterUrl();
        });
    }

    // Clear search functionality
    if (document.getElementById('clearSearchButton')) {
        document.getElementById('clearSearchButton').addEventListener('click', function() {
            console.log('Clear search button clicked');
            if (searchInput) searchInput.value = '';
            window.location.href = buildFilterUrl();
        });
    }

    // Status filter change
    if (statusFilter) {
        statusFilter.addEventListener('change', function() {
            console.log('Status filter changed to:', this.value);
            window.location.href = buildFilterUrl();
        });
    }

    // Reset filter functionality
    if (document.getElementById('resetFilterButton')) {
        document.getElementById('resetFilterButton').addEventListener('click', function() {
            console.log('Reset filter button clicked');
            window.location.href = '{{ url_for("main.clients") }}';
        });
    }

    // Allow Enter key for search
    if (searchInput) {
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                console.log('Enter key pressed');
                if (document.getElementById('searchButton')) {
                    document.getElementById('searchButton').click();
                } else {
                    window.location.href = buildFilterUrl();
                }
            }
        });
    }
});
</script>
{% endblock %}