{% extends "base.html" %}

{% block title %}Cluster Clients - VidAI{% endblock %}

{% block head %}
<style>
    .container { max-width: 1400px; margin: 2rem auto; padding: 0 2rem; }
    .admin-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; }
    .card-header { margin-bottom: 1.5rem; }
    .card-header h3 { margin: 0; color: #1e293b; }
    .btn { padding: 0.75rem 2rem; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
    .btn:hover { background: #5a67d8; }
    .btn-danger { background: #dc2626; }
    .btn-danger:hover { background: #b91c1c; }
    .btn-success { background: #059669; }
    .btn-success:hover { background: #047857; }
    .table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
    .table th, .table td { padding: 1rem; text-align: left; border-bottom: 1px solid #e5e7eb; }
    .table th { background: #f8fafc; font-weight: 600; color: #374151; }
    .status-active { color: #065f46; font-weight: 500; }
    .status-inactive { color: #dc2626; font-weight: 500; }
    .alert { padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; }
    .alert-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
    .alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="admin-card">
        <div class="card-header">
            <h3><i class="fas fa-server"></i> Cluster Clients</h3>
            <p>Manage connected cluster clients and their worker configurations.</p>
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ 'error' if category == 'error' else 'success' }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
        {% endwith %}

        <table class="table">
            <thead>
                <tr>
                    <th>Client ID</th>
                    <th>Connected At</th>
                    <th>Last Seen</th>
                    <th>Processes</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for client in clients %}
                <tr>
                    <td>{{ client.get('id') }}</td>
                    <td>{{ client.get('connected_at', 'N/A') }}</td>
                    <td>{{ client.get('last_seen', 'N/A') }}</td>
                    <td>{{ client.get('processes', [])|length }} processes</td>
                    <td>
                        <button class="btn configure-btn" data-client-id="{{ client.get('id') }}">Configure</button>
                    </td>
                </tr>
                {% endfor %}
                {% if not clients %}
                <tr>
                    <td colspan="5" style="text-align: center; color: #6b7280;">No cluster clients connected.</td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.configure-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const clientId = this.getAttribute('data-client-id');
                // Placeholder for client configuration
                alert('Configuration for client ' + clientId + ' - Feature not implemented yet');
            });
        });
    });
</script>
{% endblock %}