{% extends "base.html" %}

{% block title %}API Tokens - CoderAI{% endblock %}

{% block content %}
<div class="page-header">
    <h1>API Tokens</h1>
    <div class="header-actions">
        <button class="btn btn-primary" onclick="showCreateTokenModal()">Create Token</button>
    </div>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Token</th>
                    <th>Provider</th>
                    <th>Created</th>
                    <th>Last Used</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="tokens-table">
                <tr>
                    <td colspan="6" class="text-center text-muted">No tokens created</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Create Token Modal -->
<div id="create-token-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Create API Token</h2>
            <button class="modal-close" onclick="hideCreateTokenModal()">&times;</button>
        </div>
        <div class="modal-body">
            <form id="create-token-form">
                <div class="form-group">
                    <label for="token-name">Token Name</label>
                    <input type="text" id="token-name" class="form-control" 
                           placeholder="e.g., Production API" required>
                    <small class="form-text">A descriptive name for this token</small>
                </div>
                
                <div class="form-group">
                    <label for="token-provider">Provider Format</label>
                    <select id="token-provider" class="form-control">
                        <option value="openai">OpenAI (sk-...)</option>
                        <option value="anthropic">Anthropic (sk-ant-...)</option>
                        <option value="custom">Custom</option>
                    </select>
                </div>
                
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Create Token</button>
                    <button type="button" class="btn btn-secondary" onclick="hideCreateTokenModal()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Show Token Modal -->
<div id="show-token-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Token Created</h2>
            <button class="modal-close" onclick="hideShowTokenModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="alert alert-warning">
                <strong>Important:</strong> Copy this token now. You won't be able to see it again!
            </div>
            
            <div class="token-display">
                <code id="new-token-value"></code>
                <button class="btn btn-secondary btn-sm" onclick="copyToken()">Copy</button>
            </div>
            
            <div class="form-actions">
                <button class="btn btn-primary" onclick="hideShowTokenModal()">Done</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function showCreateTokenModal() {
    document.getElementById('create-token-modal').style.display = 'flex';
}

function hideCreateTokenModal() {
    document.getElementById('create-token-modal').style.display = 'none';
    document.getElementById('create-token-form').reset();
}

function showShowTokenModal(token) {
    document.getElementById('new-token-value').textContent = token;
    document.getElementById('show-token-modal').style.display = 'flex';
}

function hideShowTokenModal() {
    document.getElementById('show-token-modal').style.display = 'none';
}

function copyToken() {
    const token = document.getElementById('new-token-value').textContent;
    navigator.clipboard.writeText(token).then(() => {
        alert('Token copied to clipboard');
    });
}

async function loadTokens() {
    try {
        const response = await fetch('/admin/api/tokens');
        const tokens = await response.json();
        
        const tbody = document.getElementById('tokens-table');
        if (tokens.length === 0) {
            tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">No tokens created</td></tr>';
            return;
        }
        
        tbody.innerHTML = tokens.map(token => `
            <tr>
                <td>${token.name}</td>
                <td><code>${token.token.substring(0, 20)}...</code></td>
                <td>${token.provider}</td>
                <td>${new Date(token.created_at).toLocaleDateString()}</td>
                <td>${token.last_used ? new Date(token.last_used).toLocaleDateString() : 'Never'}</td>
                <td>
                    <button class="btn btn-danger btn-sm" onclick="deleteToken(${token.id})">Delete</button>
                </td>
            </tr>
        `).join('');
    } catch (error) {
        console.error('Failed to load tokens:', error);
    }
}

document.getElementById('create-token-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const name = document.getElementById('token-name').value;
    const provider = document.getElementById('token-provider').value;
    
    try {
        const response = await fetch('/admin/api/tokens', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name, provider })
        });
        
        if (response.ok) {
            const data = await response.json();
            hideCreateTokenModal();
            showShowTokenModal(data.token);
            loadTokens();
        } else {
            alert('Failed to create token');
        }
    } catch (error) {
        alert('Error: ' + error.message);
    }
});

async function deleteToken(tokenId) {
    if (!confirm('Are you sure you want to delete this token? This cannot be undone.')) {
        return;
    }
    
    try {
        const response = await fetch(`/admin/api/tokens/${tokenId}`, {
            method: 'DELETE'
        });
        
        if (response.ok) {
            loadTokens();
        } else {
            alert('Failed to delete token');
        }
    } catch (error) {
        alert('Error: ' + error.message);
    }
}

loadTokens();
</script>
{% endblock %}