{% extends "base.html" %}

{% block title %}API Tokens - Fixture Manager{% endblock %}

{% block extra_css %}
/* Modal styles */
.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.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    background: white;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.modal-header {
    padding: 1rem;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.modal-header.bg-success {
    background-color: #28a745;
    color: white;
}

.modal-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
}

.modal-body {
    padding: 1rem;
}

.modal-footer {
    padding: 1rem;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 0 0 8px 8px;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    color: #000;
}

.close-btn.white {
    color: white;
}

.close-btn.white:hover {
    color: #ccc;
}

/* Form styles */
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #333;
}

.form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
}

.form-control:focus {
    outline: none;
    border-color: #007bff;
}

.form-control[readonly] {
    background-color: #f8f9fa;
    font-family: monospace;
}

.form-text {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.25rem;
}

.form-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
    background-color: white;
}

/* Input group */
.input-group {
    display: flex;
}

.input-group .form-control {
    border-radius: 4px 0 0 4px;
    border-right: none;
}

.input-group .btn {
    border-radius: 0 4px 4px 0;
    border-left: 1px solid #007bff;
}

/* Card styles */
.card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}

.card-header {
    padding: 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    border-radius: 8px 8px 0 0;
}

.card-header.bg-info {
    background-color: #17a2b8;
    color: white;
}

.card-body {
    padding: 1rem;
}

/* Table styles */
.table-responsive {
    overflow-x: auto;
}

.table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

/* Badge styles */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 4px;
    color: white;
}

.badge.bg-success {
    background-color: #28a745;
}

.badge.bg-danger {
    background-color: #dc3545;
}

.badge.bg-secondary {
    background-color: #6c757d;
}

/* Button group */
.btn-group {
    display: inline-flex;
    gap: 2px;
}

.btn-outline-warning {
    background-color: transparent;
    color: #ffc107;
    border: 1px solid #ffc107;
}

.btn-outline-warning:hover {
    background-color: #ffc107;
    color: #212529;
}

.btn-outline-info {
    background-color: transparent;
    color: #17a2b8;
    border: 1px solid #17a2b8;
}

.btn-outline-info:hover {
    background-color: #17a2b8;
    color: white;
}

.btn-outline-danger {
    background-color: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
}

.btn-outline-danger:hover {
    background-color: #dc3545;
    color: white;
}

.btn-outline-secondary {
    background-color: transparent;
    color: #6c757d;
    border: 1px solid #6c757d;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: white;
}

/* Utility classes */
.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.text-muted {
    color: #666;
}

.font-monospace {
    font-family: monospace;
}

.py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.fa-3x {
    font-size: 3rem;
}

/* Hide elements by default */
.d-none {
    display: none;
}

/* Success message styling */
.success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Warning message styling */
.warning-message {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Danger message styling */
.danger-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 1rem;
}
{% endblock %}

{% block content %}
<div class="content">
    <!-- Header -->
    <div class="mb-4">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1>🔑 API Tokens</h1>
                <p class="text-muted">Manage your API tokens for external application access</p>
            </div>
            <button type="button" class="btn" onclick="showCreateModal()">
                ➕ Create New Token
            </button>
        </div>
    </div>

    <!-- API Documentation Card -->
    <div class="card mb-4">
        <div class="card-header bg-info">
            <h5 style="margin: 0; color: white;">ℹ️ API Usage</h5>
        </div>
        <div class="card-body">
            <p><strong>Base URL:</strong> <code>{{ request.url_root }}api/</code></p>
            <p><strong>Authentication:</strong> Include your token in the Authorization header:</p>
            <pre style="background: #f8f9fa; padding: 0.5rem; border-radius: 4px; margin: 0.5rem 0;"><code>Authorization: Bearer YOUR_TOKEN_HERE</code></pre>
            <p><strong>Available Endpoints:</strong></p>
            <ul>
                <li><code>GET /api/fixtures</code> - List all fixtures</li>
                <li><code>GET /api/matches</code> - List all matches</li>
                <li><code>GET /api/match/&lt;id&gt;</code> - Get match details</li>
            </ul>
        </div>
    </div>

    <!-- Tokens List -->
    <div class="card">
        <div class="card-header">
            <h5 style="margin: 0;">Your API Tokens</h5>
        </div>
        <div class="card-body">
            {% if tokens %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Status</th>
                                <th>Created</th>
                                <th>Expires</th>
                                <th>Last Used</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="tokensTableBody">
                            {% for token in tokens %}
                            <tr data-token-id="{{ token.id }}">
                                <td>
                                    <strong>{{ token.name }}</strong>
                                </td>
                                <td>
                                    {% if token.is_valid() %}
                                        <span class="badge bg-success">Active</span>
                                    {% elif token.is_expired() %}
                                        <span class="badge bg-danger">Expired</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Revoked</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <small class="text-muted">
                                        {{ token.created_at.strftime('%Y-%m-%d %H:%M') }}
                                    </small>
                                </td>
                                <td>
                                    <small class="text-muted">
                                        {{ token.expires_at.strftime('%Y-%m-%d %H:%M') }}
                                    </small>
                                </td>
                                <td>
                                    <small class="text-muted">
                                        {% if token.last_used_at %}
                                            {{ token.last_used_at.strftime('%Y-%m-%d %H:%M') }}
                                            {% if token.last_used_ip %}
                                                <br>from {{ token.last_used_ip }}
                                            {% endif %}
                                        {% else %}
                                            Never used
                                        {% endif %}
                                    </small>
                                </td>
                                <td>
                                    <div class="btn-group">
                                        {% if token.is_active and not token.is_expired() %}
                                            <button type="button" class="btn btn-sm btn-outline-warning revoke-token-btn"
                                                    data-token-id="{{ token.id }}"
                                                    data-token-name="{{ token.name }}"
                                                    title="Revoke Token">
                                                🚫
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-info extend-token-btn"
                                                    data-token-id="{{ token.id }}"
                                                    data-token-name="{{ token.name }}"
                                                    title="Extend Expiration">
                                                🕒
                                            </button>
                                        {% endif %}
                                        <button type="button" class="btn btn-sm btn-outline-danger delete-token-btn"
                                                data-token-id="{{ token.id }}"
                                                data-token-name="{{ token.name }}"
                                                title="Delete Token">
                                            🗑️
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center py-5">
                    <div style="font-size: 3rem; margin-bottom: 1rem;">🔑</div>
                    <h5 class="text-muted">No API tokens yet</h5>
                    <p class="text-muted">Create your first API token to start accessing the API</p>
                    <button type="button" class="btn" onclick="showCreateModal()">
                        ➕ Create Your First Token
                    </button>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Create Token Modal -->
<div class="modal" id="createTokenModal">
    <div class="modal-dialog">
        <div class="modal-header">
            <h5 class="modal-title">Create New API Token</h5>
            <button type="button" class="close-btn" onclick="hideCreateModal()">×</button>
        </div>
        <form id="createTokenForm">
            <div class="modal-body">
                <div class="mb-3">
                    <label for="tokenName" class="form-label">Token Name</label>
                    <input type="text" class="form-control" id="tokenName" name="name" required
                           placeholder="e.g., Mobile App, Dashboard Integration">
                    <div class="form-text">Choose a descriptive name to identify this token</div>
                </div>
                <div class="warning-message">
                    ⚠️ <strong>Important:</strong> The token will only be shown once after creation. Make sure to copy and store it securely.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="hideCreateModal()">Cancel</button>
                <button type="submit" class="btn">
                    ➕ Create Token
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Token Created Modal -->
<div class="modal" id="tokenCreatedModal">
    <div class="modal-dialog">
        <div class="modal-header bg-success">
            <h5 class="modal-title" style="color: white;">
                ✅ Token Created Successfully
            </h5>
            <button type="button" class="close-btn white" onclick="hideTokenCreatedModal()">×</button>
        </div>
        <div class="modal-body">
            <div class="success-message">
                <strong>Your new API token has been created!</strong>
            </div>
            <div class="mb-3">
                <label for="newTokenValue" class="form-label"><strong>Token Value:</strong></label>
                <div class="input-group">
                    <input type="text" class="form-control font-monospace" id="newTokenValue" readonly>
                    <button class="btn btn-outline-secondary" type="button" onclick="copyToken()">
                        📋 Copy
                    </button>
                </div>
            </div>
            <div class="danger-message">
                ⚠️ <strong>Warning:</strong> This token will not be shown again. Make sure to copy and store it in a secure location.
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn" onclick="hideTokenCreatedModal()">I've Saved the Token</button>
        </div>
    </div>
</div>

<!-- Extend Token Modal -->
<div class="modal" id="extendTokenModal">
    <div class="modal-dialog">
        <div class="modal-header">
            <h5 class="modal-title">Extend Token Expiration</h5>
            <button type="button" class="close-btn" onclick="hideExtendModal()">×</button>
        </div>
        <form id="extendTokenForm">
            <div class="modal-body">
                <p>Extend the expiration date for token: <strong id="extendTokenName"></strong></p>
                <div class="mb-3">
                    <label for="extensionDays" class="form-label">Extend by (days)</label>
                    <select class="form-select" id="extensionDays" name="days">
                        <option value="30">30 days</option>
                        <option value="90">90 days</option>
                        <option value="180">180 days</option>
                        <option value="365" selected>365 days (1 year)</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="hideExtendModal()">Cancel</button>
                <button type="submit" class="btn btn-outline-info">
                    🕒 Extend Token
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// Global variables for token management
let currentTokenId = null;

// Modal management functions
function showCreateModal() {
    document.getElementById('createTokenModal').classList.add('show');
}

function hideCreateModal() {
    document.getElementById('createTokenModal').classList.remove('show');
    document.getElementById('createTokenForm').reset();
}

function showExtendModal(tokenId, tokenName) {
    currentTokenId = tokenId;
    document.getElementById('extendTokenName').textContent = tokenName;
    document.getElementById('extendTokenModal').classList.add('show');
}

function hideExtendModal() {
    document.getElementById('extendTokenModal').classList.remove('show');
    currentTokenId = null;
}

function hideTokenCreatedModal() {
    document.getElementById('tokenCreatedModal').classList.remove('show');
    // Reload page to show the new token in the list
    setTimeout(() => location.reload(), 500);
}

// Create token form submission
document.getElementById('createTokenForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const tokenName = formData.get('name');
    
    if (!tokenName.trim()) {
        showAlert('Token name is required', 'danger');
        return;
    }
    
    try {
        const response = await fetch('{{ url_for("main.create_api_token") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ name: tokenName })
        });
        
        const data = await response.json();
        
        if (response.ok) {
            // Hide create modal
            hideCreateModal();
            
            // Show token value in success modal
            document.getElementById('newTokenValue').value = data.token.token;
            document.getElementById('tokenCreatedModal').classList.add('show');
            
        } else {
            showAlert(data.error || 'Failed to create token', 'danger');
        }
    } catch (error) {
        console.error('Error creating token:', error);
        showAlert('Network error occurred', 'danger');
    }
});

// Extend token form submission
document.getElementById('extendTokenForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    if (!currentTokenId) return;
    
    const formData = new FormData(this);
    const days = parseInt(formData.get('days'));
    
    try {
        const response = await fetch(`{{ url_for("main.extend_api_token", token_id=0) }}`.replace('0', currentTokenId), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ days: days })
        });
        
        const data = await response.json();
        
        if (response.ok) {
            showAlert(data.message, 'success');
            hideExtendModal();
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert(data.error || 'Failed to extend token', 'danger');
        }
    } catch (error) {
        console.error('Error extending token:', error);
        showAlert('Network error occurred', 'danger');
    }
});

// Token management functions
async function revokeToken(tokenId, tokenName) {
    if (!confirm(`Are you sure you want to revoke the token "${tokenName}"? This action cannot be undone.`)) {
        return;
    }
    
    try {
        const response = await fetch(`{{ url_for("main.revoke_api_token", token_id=0) }}`.replace('0', tokenId), {
            method: 'POST'
        });
        
        const data = await response.json();
        
        if (response.ok) {
            showAlert(data.message, 'success');
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert(data.error || 'Failed to revoke token', 'danger');
        }
    } catch (error) {
        console.error('Error revoking token:', error);
        showAlert('Network error occurred', 'danger');
    }
}

async function deleteToken(tokenId, tokenName) {
    if (!confirm(`Are you sure you want to permanently delete the token "${tokenName}"? This action cannot be undone.`)) {
        return;
    }
    
    try {
        const response = await fetch(`{{ url_for("main.delete_api_token", token_id=0) }}`.replace('0', tokenId), {
            method: 'DELETE'
        });
        
        const data = await response.json();
        
        if (response.ok) {
            showAlert(data.message, 'success');
            // Remove the row from table
            const row = document.querySelector(`tr[data-token-id="${tokenId}"]`);
            if (row) {
                row.remove();
            }
        } else {
            showAlert(data.error || 'Failed to delete token', 'danger');
        }
    } catch (error) {
        console.error('Error deleting token:', error);
        showAlert('Network error occurred', 'danger');
    }
}

function copyToken() {
    const tokenInput = document.getElementById('newTokenValue');
    const tokenValue = tokenInput.value;
    
    // Use modern Clipboard API if available
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(tokenValue).then(() => {
            showAlert('Token copied to clipboard!', 'success');
        }).catch(err => {
            console.error('Failed to copy token:', err);
            fallbackCopyToken(tokenInput);
        });
    } else {
        // Fallback for older browsers or non-secure contexts
        fallbackCopyToken(tokenInput);
    }
}

function fallbackCopyToken(tokenInput) {
    try {
        tokenInput.select();
        tokenInput.setSelectionRange(0, 99999); // For mobile devices
        
        // Use the deprecated execCommand as fallback
        const successful = document.execCommand('copy');
        if (successful) {
            showAlert('Token copied to clipboard!', 'success');
        } else {
            showAlert('Failed to copy token. Please copy manually.', 'warning');
        }
    } catch (err) {
        console.error('Failed to copy token:', err);
        showAlert('Failed to copy token. Please copy manually.', 'warning');
    }
}

function showAlert(message, type) {
    // Create alert element
    const alertDiv = document.createElement('div');
    let alertClass = 'success-message';
    if (type === 'danger') alertClass = 'danger-message';
    if (type === 'warning') alertClass = 'warning-message';
    
    alertDiv.className = alertClass;
    alertDiv.innerHTML = message;
    
    // Insert at top of content
    const content = document.querySelector('.content');
    content.insertBefore(alertDiv, content.firstChild);
    
    // Auto-dismiss after 5 seconds
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}

// Event listeners for token action buttons
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('modal')) {
        e.target.classList.remove('show');
    }
    
    // Handle revoke token button clicks
    if (e.target.classList.contains('revoke-token-btn')) {
        const tokenId = e.target.getAttribute('data-token-id');
        const tokenName = e.target.getAttribute('data-token-name');
        revokeToken(tokenId, tokenName);
    }
    
    // Handle extend token button clicks
    if (e.target.classList.contains('extend-token-btn')) {
        const tokenId = e.target.getAttribute('data-token-id');
        const tokenName = e.target.getAttribute('data-token-name');
        showExtendModal(tokenId, tokenName);
    }
    
    // Handle delete token button clicks
    if (e.target.classList.contains('delete-token-btn')) {
        const tokenId = e.target.getAttribute('data-token-id');
        const tokenName = e.target.getAttribute('data-token-name');
        deleteToken(tokenId, tokenName);
    }
});
</script>
{% endblock %}