{% extends "base.html" %}

{% block title %}Player Management - SKE Digital Signage{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col">
            <h1><i class="bi bi-display"></i> Player Management</h1>
            <p class="text-muted">Manage digital signage players and their configurations</p>
        </div>
        <div class="col-auto">
            <a href="{{ url_for('player.add') }}" class="btn btn-primary">
                <i class="bi bi-plus"></i> Add Player
            </a>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Total Players</h5>
                            <h2>{{ players|length }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="bi bi-display" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-success">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Active Players</h5>
                            <h2>{{ players|selectattr('is_active')|list|length }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="bi bi-play-circle" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-warning">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Online Players</h5>
                            <h2>{{ players|selectattr('last_seen')|list|length }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="bi bi-wifi" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-info">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Locked Players</h5>
                            <h2>{{ players|selectattr('locked_to_group_id')|list|length }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="bi bi-lock" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Players Table -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5><i class="bi bi-list"></i> Players</h5>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="refreshPlayers()">
                    <i class="bi bi-arrow-clockwise"></i> Refresh
                </button>
                <button type="button" class="btn btn-outline-danger btn-sm" onclick="bulkDelete()" disabled id="bulkDeleteBtn">
                    <i class="bi bi-trash"></i> Delete Selected
                </button>
            </div>
        </div>
        <div class="card-body">
            {% if players %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                                </th>
                                <th>Player Name</th>
                                <th>Hostname</th>
                                <th>Status</th>
                                <th>Group</th>
                                <th>Last Seen</th>
                                <th>Version</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for player in players %}
                            <tr>
                                <td>
                                    <input type="checkbox" class="player-checkbox" value="{{ player.id }}" onchange="updateBulkActions()">
                                </td>
                                <td>
                                    <strong>{{ player.username }}</strong>
                                    {% if player.locked_to_group_id %}
                                        <span class="badge bg-warning" title="Locked to group">
                                            <i class="bi bi-lock"></i>
                                        </span>
                                    {% endif %}
                                </td>
                                <td>
                                    <code>{{ player.hostname or 'Not set' }}</code>
                                </td>
                                <td>
                                    {% if player.is_active %}
                                        {% if player.last_seen and (now() - player.last_seen).total_seconds() < 300 %}
                                            <span class="badge bg-success">Online</span>
                                        {% else %}
                                            <span class="badge bg-warning">Active</span>
                                        {% endif %}
                                    {% else %}
                                        <span class="badge bg-secondary">Inactive</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if player.locked_to_group_id %}
                                        <span class="badge bg-primary">Group {{ player.locked_to_group_id }}</span>
                                    {% else %}
                                        <span class="text-muted">No group</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if player.last_seen %}
                                        <span title="{{ player.last_seen }}">
                                            {{ player.last_seen.strftime('%Y-%m-%d %H:%M') }}
                                        </span>
                                    {% else %}
                                        <span class="text-muted">Never</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge bg-info">v{{ player.playlist_version or 0 }}</span>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ url_for('player.view', id=player.id) }}" class="btn btn-outline-primary" title="View Player">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        <a href="{{ url_for('player.edit', id=player.id) }}" class="btn btn-outline-warning" title="Edit Player">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <button type="button" class="btn btn-outline-success" onclick="openPlayerWindow('{{ player.id }}')" title="Open Player View">
                                            <i class="bi bi-window"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-danger" onclick="deletePlayer('{{ player.id }}', '{{ player.username }}')" title="Delete Player">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-display text-muted" style="font-size: 4rem;"></i>
                    <h4 class="text-muted mt-3">No Players Found</h4>
                    <p class="text-muted">Get started by adding your first digital signage player.</p>
                    <a href="{{ url_for('player.add') }}" class="btn btn-primary">
                        <i class="bi bi-plus"></i> Add First Player
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Delete Player Modal -->
<div class="modal fade" id="deletePlayerModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Player</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete player <strong id="deletePlayerName"></strong>?</p>
                <p class="text-danger small">This action cannot be undone and will remove all player data.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form method="POST" action="{{ url_for('player.delete') }}" style="display:inline;">
                    <input type="hidden" id="deletePlayerId" name="player_id">
                    <button type="submit" class="btn btn-danger">Delete Player</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Delete Modal -->
<div class="modal fade" id="bulkDeleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Selected Players</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete <span id="selectedCount">0</span> selected players?</p>
                <p class="text-danger small">This action cannot be undone and will remove all player data.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" onclick="confirmBulkDelete()">Delete Players</button>
            </div>
        </div>
    </div>
</div>

<script>
function deletePlayer(playerId, playerName) {
    document.getElementById('deletePlayerId').value = playerId;
    document.getElementById('deletePlayerName').textContent = playerName;
    
    const modal = new bootstrap.Modal(document.getElementById('deletePlayerModal'));
    modal.show();
}

function toggleSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.player-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
    });
    
    updateBulkActions();
}

function updateBulkActions() {
    const selectedCheckboxes = document.querySelectorAll('.player-checkbox:checked');
    const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
    
    if (selectedCheckboxes.length > 0) {
        bulkDeleteBtn.disabled = false;
        bulkDeleteBtn.textContent = `Delete ${selectedCheckboxes.length} Selected`;
    } else {
        bulkDeleteBtn.disabled = true;
        bulkDeleteBtn.innerHTML = '<i class="bi bi-trash"></i> Delete Selected';
    }
}

function bulkDelete() {
    const selectedCheckboxes = document.querySelectorAll('.player-checkbox:checked');
    
    if (selectedCheckboxes.length === 0) {
        return;
    }
    
    document.getElementById('selectedCount').textContent = selectedCheckboxes.length;
    const modal = new bootstrap.Modal(document.getElementById('bulkDeleteModal'));
    modal.show();
}

function confirmBulkDelete() {
    const selectedCheckboxes = document.querySelectorAll('.player-checkbox:checked');
    const playerIds = Array.from(selectedCheckboxes).map(cb => cb.value);
    
    // Create a form and submit it
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '{{ url_for("player.bulk_delete") }}';
    
    playerIds.forEach(id => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'player_ids';
        input.value = id;
        form.appendChild(input);
    });
    
    document.body.appendChild(form);
    form.submit();
}

function refreshPlayers() {
    window.location.reload();
}

function openPlayerWindow(playerId) {
    const url = `{{ url_for('player.fullscreen', id='PLAYER_ID') }}`.replace('PLAYER_ID', playerId);
    window.open(url, '_blank', 'width=1920,height=1080,fullscreen=yes');
}

// Auto-refresh every 30 seconds
setInterval(function() {
    const visibilitySupported = typeof document.hidden !== 'undefined';
    if (!visibilitySupported || !document.hidden) {
        // Only refresh if page is visible
        fetch(window.location.href)
            .then(response => response.text())
            .then(html => {
                // Update only the stats if different
                const parser = new DOMParser();
                const newDoc = parser.parseFromString(html, 'text/html');
                const currentStats = document.querySelector('.row.mb-4').innerHTML;
                const newStats = newDoc.querySelector('.row.mb-4').innerHTML;
                
                if (currentStats !== newStats) {
                    document.querySelector('.row.mb-4').innerHTML = newStats;
                }
            })
            .catch(error => console.log('Auto-refresh failed:', error));
    }
}, 30000);
</script>
{% endblock %}