{% extends "base.html" %}

{% block title %}Cluster Tokens - 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; }
    .btn-icon { padding: 0.5rem; background: none; border: none; cursor: pointer; color: #64748b; }
    .btn-icon:hover { color: #374151; }
    .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; }
    .actions-cell { display: flex; gap: 0.5rem; }
    .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; }
    .token-preview { font-family: monospace; background: #f1f5f9; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.875rem; }
    .form-group { margin-bottom: 1.5rem; }
    .form-group label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; }
    .form-group input { width: 100%; padding: 0.75rem; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 1rem; }
    .form-group input:focus { outline: none; border-color: #667eea; }
    .token-display { background: #f8fafc; padding: 1rem; border-radius: 8px; border: 1px solid #e5e7eb; margin: 1rem 0; }
    .token-display pre { word-break: break-all; white-space: pre-wrap; font-family: monospace; background: white; padding: 1rem; border-radius: 4px; border: 1px solid #d1d5db; }
    .copy-btn { margin-top: 0.5rem; padding: 0.5rem 1rem; font-size: 0.9rem; }
    .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
    .modal-content { background-color: white; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2rem; width: 90%; max-width: 500px; border-radius: 12px; }
    .modal-header { margin-bottom: 1rem; position: relative; }
    .modal-body { margin-bottom: 1rem; }
    .modal-footer { text-align: right; margin-top: 1.5rem; }
    .close { position: absolute; top: 0; right: 0; cursor: pointer; font-size: 1.5rem; line-height: 1; }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="admin-card">
        <div class="card-header">
            <h3><i class="fas fa-key"></i> Cluster Tokens</h3>
            <p>Manage authentication tokens for worker processes in the cluster.</p>
            <button onclick="openAddTokenModal()" class="btn" style="margin-left: auto;"><i class="fas fa-plus"></i> Add Token</button>
        </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>Name</th>
                    <th>Created</th>
                    <th>Last Used</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for token in worker_tokens %}
                <tr>
                    <td>{{ token.get('name') }}</td>
                    <td>{{ token.get('created_at', 'N/A')[:19] if token.get('created_at') else 'N/A' }}</td>
                    <td>{{ token.get('last_used', 'Never')[:19] if token.get('last_used') else 'Never' }}</td>
                    <td><span class="status-{{ 'active' if token.get('active') else 'inactive' }}">{{ 'Active' if token.get('active') else 'Inactive' }}</span></td>
                    <td>
                        {% if token.get('active') %}
                        <form method="post" action="/admin/cluster_tokens/{{ token.get('id') }}/deactivate" style="display: inline;">
                            <button type="submit" class="btn" style="padding: 0.5rem 1rem; font-size: 0.9rem; background: #f59e0b;">Deactivate</button>
                        </form>
                        {% else %}
                        <form method="post" action="/admin/cluster_tokens/{{ token.get('id') }}/activate" style="display: inline;">
                            <button type="submit" class="btn btn-success" style="padding: 0.5rem 1rem; font-size: 0.9rem;">Activate</button>
                        </form>
                        {% endif %}
                        <button onclick='deleteToken({{ token.get("id") }}, "{{ token.get("name") }}")' class="btn btn-danger" style="padding: 0.5rem 1rem; font-size: 0.9rem;">Delete</button>
                    </td>
                </tr>
                {% endfor %}
                {% if not worker_tokens %}
                <tr>
                    <td colspan="5" style="text-align: center; color: #6b7280;">No cluster tokens found. Generate your first token above.</td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- Add Token Modal -->
<div id="addTokenModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3><i class="fas fa-plus"></i> Generate New Cluster Token</h3>
            <span class="close" onclick="closeAddTokenModal()">&times;</span>
        </div>
        <form method="post" action="/admin/cluster_tokens/generate">
            <div class="modal-body">
                <div class="form-group">
                    <label for="modal_token_name">Token Name</label>
                    <input type="text" id="modal_token_name" name="token_name" placeholder="e.g., Worker Node 1" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" onclick="closeAddTokenModal()" class="btn" style="background: #6b7280;">Cancel</button>
                <button type="submit" class="btn">Generate Token</button>
            </div>
        </form>
    </div>
</div>

<!-- Token Generated Modal -->
{% if generated_token %}
<div id="tokenModal" class="modal" style="display: block;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Cluster Token Generated Successfully!</h3>
            <span class="close" onclick="closeTokenModal()">&times;</span>
        </div>
        <div class="modal-body">
            <p><strong>Token Name:</strong> {{ token_name }}</p>
            <p><strong>Token:</strong></p>
            <div class="token-display" style="margin: 1rem 0;">
                <pre id="modalTokenText">{{ generated_token }}</pre>
                <button class="btn copy-btn" onclick="copyTokenFromModal()">Copy Token</button>
            </div>
            <p style="color: #dc2626; font-weight: 500;">Copy this token now. You won't be able to see it again!</p>
        </div>
        <div class="modal-footer">
            <button onclick="closeTokenModal()" class="btn">Close</button>
        </div>
    </div>
</div>
{% endif %}

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Delete Cluster Token</h3>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to delete the token "<span id="deleteTokenName"></span>"?</p>
            <p style="color: #dc2626; font-weight: 500;">This action cannot be undone. Any worker processes using this token will stop working.</p>
        </div>
        <div class="modal-footer">
            <button onclick="closeDeleteModal()" class="btn" style="background: #6b7280;">Cancel</button>
            <form id="deleteForm" method="post" action="" style="display: inline;">
                <button type="submit" class="btn btn-danger">Delete Token</button>
            </form>
        </div>
    </div>
</div>

<script>
    function deleteToken(tokenId, tokenName) {
        document.getElementById('deleteTokenName').textContent = tokenName;
        document.getElementById('deleteForm').action = `/admin/cluster_tokens/${tokenId}/delete`;
        document.getElementById('deleteModal').style.display = 'block';
    }

    function closeDeleteModal() {
        document.getElementById('deleteModal').style.display = 'none';
    }

    function openAddTokenModal() {
        const modal = document.getElementById('addTokenModal');
        modal.style.display = 'block';
    }

    function closeAddTokenModal() {
        const modal = document.getElementById('addTokenModal');
        modal.style.display = 'none';
    }

    function closeTokenModal() {
        document.getElementById('tokenModal').style.display = 'none';
        window.location.href = '/admin/cluster_tokens'; // Redirect to avoid POST resubmission
    }

    function copyTokenFromModal() {
        const tokenText = document.getElementById('modalTokenText');
        const copyBtn = document.querySelector('#tokenModal .copy-btn');
        const originalText = copyBtn.textContent;

        // Use execCommand for reliable copying
        const textArea = document.createElement('textarea');
        textArea.value = tokenText.textContent.trim();
        document.body.appendChild(textArea);
        textArea.select();
        try {
            document.execCommand('copy');
            copyBtn.textContent = 'Copied!';
            copyBtn.style.background = '#10b981';
            setTimeout(function() {
                copyBtn.textContent = originalText;
                copyBtn.style.background = '';
            }, 2000);
        } catch (err) {
            alert('Failed to copy token. Please select and copy manually.');
        }
        document.body.removeChild(textArea);
    }

    // Close modal when clicking outside
    window.onclick = function(event) {
        const addModal = document.getElementById('addTokenModal');
        if (addModal && event.target == addModal) {
            closeAddTokenModal();
        }
        const deleteModal = document.getElementById('deleteModal');
        if (deleteModal && event.target == deleteModal) {
            closeDeleteModal();
        }
        const tokenModal = document.getElementById('tokenModal');
        if (tokenModal && event.target == tokenModal) {
            closeTokenModal();
        }
    }
</script>
{% endblock %}