{% extends "base.html" %}

{% block title %}Settings - API Key Management{% endblock %}

{% block extra_head %}
<style>
/* Settings Page Specific Styles */
.settings-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--border-color);
    overflow-x: auto;
}

.settings-tab {
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-base);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.settings-tab:hover {
    color: var(--text-primary);
}

.settings-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.settings-tab i {
    margin-right: var(--spacing-sm);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* API Key Cards */
.api-keys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.api-key-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    backdrop-filter: blur(10px);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.api-key-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: var(--transition-base);
}

.api-key-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.api-key-card:hover::before {
    opacity: 1;
}

.api-key-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.api-key-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.api-key-category {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.api-key-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 500;
}

.status-active {
    background: rgba(56, 239, 125, 0.1);
    color: var(--color-success);
}

.status-inactive {
    background: rgba(108, 117, 125, 0.1);
    color: var(--text-muted);
}

.status-expired {
    background: rgba(245, 87, 108, 0.1);
    color: var(--color-danger);
}

.api-key-details {
    margin: var(--spacing-md) 0;
}

.api-key-field {
    margin-bottom: var(--spacing-sm);
}

.api-key-field label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.api-key-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.api-key-value.masked {
    color: var(--text-muted);
}

.api-key-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.btn-icon {
    padding: var(--spacing-sm);
    min-width: auto;
    aspect-ratio: 1;
}

.api-key-stats {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.stat-item {
    flex: 1;
}

.stat-item label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.stat-item value {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Add API Key Form */
.add-api-key-section {
    background: var(--bg-card);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    transition: var(--transition-base);
}

.add-api-key-section:hover {
    border-color: var(--color-primary);
    background: var(--bg-card-hover);
}

.add-api-key-section i {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.modal.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
}

.modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.modal-close:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--spacing-lg);
}

.modal-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* Form Styles */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.form-group label .required {
    color: var(--color-danger);
}

.form-control {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23adb5bd' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.form-help {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

.input-group {
    position: relative;
}

.input-group-append {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
}

.input-group-append button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-sm);
    transition: var(--transition-fast);
}

.input-group-append button:hover {
    color: var(--text-primary);
}

/* Test Result */
.test-result {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    display: none;
}

.test-result.success {
    background: rgba(56, 239, 125, 0.1);
    border: 1px solid rgba(56, 239, 125, 0.3);
    color: var(--color-success);
}

.test-result.error {
    background: rgba(245, 87, 108, 0.1);
    border: 1px solid rgba(245, 87, 108, 0.3);
    color: var(--color-danger);
}

.test-result.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
}

.empty-state i {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.empty-state h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.empty-state p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* Search & Filter */
.search-filter-bar {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.search-box i {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-box input {
    padding-left: 40px;
}

.filter-select {
    min-width: 200px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
{% endblock %}

{% block content %}
<!-- Settings Section -->
<section class="section active" id="settings">
    <div class="page-header">
        <div>
            <h1 class="page-title">Settings</h1>
            <p class="page-subtitle">Manage your API keys and system configuration</p>
        </div>
        <button class="btn btn-primary" onclick="openAddKeyModal()">
            <i class="fas fa-plus"></i> Add API Key
        </button>
    </div>

    <!-- Settings Tabs -->
    <div class="settings-tabs">
        <button class="settings-tab active" data-tab="api-keys">
            <i class="fas fa-key"></i> API Keys
        </button>
        <button class="settings-tab" data-tab="general">
            <i class="fas fa-cog"></i> General
        </button>
        <button class="settings-tab" data-tab="notifications">
            <i class="fas fa-bell"></i> Notifications
        </button>
    </div>

    <!-- API Keys Tab -->
    <div class="tab-content active" id="api-keys-tab">
        <!-- Search & Filter -->
        <div class="search-filter-bar">
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" class="form-control" id="searchKeys" placeholder="Search API keys...">
            </div>
            <select class="form-control filter-select" id="filterCategory">
                <option value="">All Categories</option>
                <option value="AI Provider">AI Providers</option>
                <option value="Image Generation">Image Generation</option>
                <option value="Email Marketing">Email Marketing</option>
                <option value="Social Media">Social Media</option>
                <option value="SEO Tools">SEO Tools</option>
                <option value="Affiliate">Affiliate Networks</option>
                <option value="Other">Other</option>
            </select>
            <select class="form-control filter-select" id="filterStatus">
                <option value="">All Status</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
                <option value="expired">Expired</option>
            </select>
        </div>

        <!-- Add API Key Section -->
        <div class="add-api-key-section" onclick="openAddKeyModal()">
            <i class="fas fa-plus-circle"></i>
            <h3>Add New API Key</h3>
            <p>Configure API keys for your services</p>
        </div>

        <!-- API Keys Grid -->
        <div class="api-keys-grid" id="apiKeysGrid">
            <!-- API key cards will be loaded here -->
            <div class="empty-state">
                <i class="fas fa-key"></i>
                <h3>No API Keys Yet</h3>
                <p>Add your first API key to get started</p>
                <button class="btn btn-primary" onclick="openAddKeyModal()">
                    <i class="fas fa-plus"></i> Add API Key
                </button>
            </div>
        </div>
    </div>

    <!-- General Settings Tab -->
    <div class="tab-content" id="general-tab">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-cog"></i> General Settings
                </h3>
            </div>
            <div class="card-body">
                <p class="text-muted">General settings coming soon...</p>
            </div>
        </div>
    </div>

    <!-- Notifications Tab -->
    <div class="tab-content" id="notifications-tab">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-bell"></i> Notification Settings
                </h3>
            </div>
            <div class="card-body">
                <p class="text-muted">Notification settings coming soon...</p>
            </div>
        </div>
    </div>
</section>

<!-- Add/Edit API Key Modal -->
<div class="modal" id="apiKeyModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">Add API Key</h3>
            <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <form id="apiKeyForm">
                <input type="hidden" id="keyId" name="keyId">
                
                <div class="form-group">
                    <label for="serviceName">Service <span class="required">*</span></label>
                    <select class="form-control form-select" id="serviceName" name="serviceName" required>
                        <option value="">Select a service...</option>
                    </select>
                    <small class="form-help">Choose the service you want to configure</small>
                </div>

                <div class="form-group">
                    <label for="apiKey">API Key <span class="required">*</span></label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="apiKey" name="apiKey" 
                               placeholder="Enter your API key" required>
                        <div class="input-group-append">
                            <button type="button" onclick="togglePasswordVisibility('apiKey')">
                                <i class="fas fa-eye" id="apiKeyToggle"></i>
                            </button>
                        </div>
                    </div>
                    <small class="form-help">Your API key will be encrypted and stored securely</small>
                </div>

                <div class="form-group" id="apiSecretGroup" style="display: none;">
                    <label for="apiSecret"><span id="secretLabel">API Secret</span></label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="apiSecret" name="apiSecret" 
                               placeholder="Enter API secret (if required)">
                        <div class="input-group-append">
                            <button type="button" onclick="togglePasswordVisibility('apiSecret')">
                                <i class="fas fa-eye" id="apiSecretToggle"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="form-group" id="endpointGroup" style="display: none;">
                    <label for="endpointUrl">Endpoint URL</label>
                    <input type="url" class="form-control" id="endpointUrl" name="endpointUrl" 
                           placeholder="https://api.example.com">
                    <small class="form-help">Custom endpoint URL (optional)</small>
                </div>

                <div class="form-group">
                    <label for="status">Status</label>
                    <select class="form-control form-select" id="status" name="status">
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>

                <div class="test-result" id="testResult"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline" onclick="closeModal()">Cancel</button>
            <button type="button" class="btn btn-info" onclick="testApiKey()">
                <i class="fas fa-vial"></i> Test Connection
            </button>
            <button type="button" class="btn btn-primary" onclick="saveApiKey()">
                <i class="fas fa-save"></i> Save
            </button>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal" id="deleteModal">
    <div class="modal-content" style="max-width: 400px;">
        <div class="modal-header">
            <h3>Confirm Delete</h3>
            <button class="modal-close" onclick="closeDeleteModal()">&times;</button>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to delete this API key?</p>
            <p class="text-muted">This action cannot be undone.</p>
            <input type="hidden" id="deleteKeyId">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline" onclick="closeDeleteModal()">Cancel</button>
            <button type="button" class="btn btn-danger" onclick="confirmDelete()">
                <i class="fas fa-trash"></i> Delete
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// Settings page JavaScript
let supportedServices = [];
let apiKeys = [];

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    loadSupportedServices();
    loadApiKeys();
    setupTabSwitching();
    setupSearchFilter();
});

// Tab Switching
function setupTabSwitching() {
    document.querySelectorAll('.settings-tab').forEach(tab => {
        tab.addEventListener('click', function() {
            const tabName = this.dataset.tab;
            
            // Update active tab
            document.querySelectorAll('.settings-tab').forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            
            // Update active content
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
            document.getElementById(tabName + '-tab').classList.add('active');
        });
    });
}

// Load Supported Services
async function loadSupportedServices() {
    try {
        const response = await fetch('/api/keys/services');
        const data = await response.json();
        supportedServices = data.services || [];
        
        // Populate service dropdown
        const select = document.getElementById('serviceName');
        select.innerHTML = '<option value="">Select a service...</option>';
        
        // Group by category
        const categories = {};
        supportedServices.forEach(service => {
            if (!categories[service.category]) {
                categories[service.category] = [];
            }
            categories[service.category].push(service);
        });
        
        // Add optgroups
        Object.keys(categories).sort().forEach(category => {
            const optgroup = document.createElement('optgroup');
            optgroup.label = category;
            
            categories[category].forEach(service => {
                const option = document.createElement('option');
                option.value = service.name;
                option.textContent = service.display_name;
                option.dataset.requiresSecret = service.requires_secret;
                option.dataset.requiresEndpoint = service.requires_endpoint;
                option.dataset.secretLabel = service.secret_label || 'API Secret';
                optgroup.appendChild(option);
            });
            
            select.appendChild(optgroup);
        });
        
        // Handle service selection
        select.addEventListener('change', function() {
            const selected = this.options[this.selectedIndex];
            const requiresSecret = selected.dataset.requiresSecret === 'true';
            const requiresEndpoint = selected.dataset.requiresEndpoint === 'true';
            const secretLabel = selected.dataset.secretLabel || 'API Secret';
            
            // Show/hide fields based on service requirements
            document.getElementById('apiSecretGroup').style.display = requiresSecret ? 'block' : 'none';
            document.getElementById('endpointGroup').style.display = requiresEndpoint ? 'block' : 'none';
            document.getElementById('secretLabel').textContent = secretLabel;
        });
        
    } catch (error) {
        console.error('Failed to load services:', error);
        showToast('Failed to load services', 'error');
    }
}

// Load API Keys
async function loadApiKeys() {
    try {
        const response = await fetch('/api/keys');
        const data = await response.json();
        apiKeys = data.keys || [];
        
        renderApiKeys(apiKeys);
    } catch (error) {
        console.error('Failed to load API keys:', error);
        showToast('Failed to load API keys', 'error');
    }
}

// Render API Keys
function renderApiKeys(keys) {
    const grid = document.getElementById('apiKeysGrid');
    
    if (keys.length === 0) {
        grid.innerHTML = `
            <div class="empty-state">
                <i class="fas fa-key"></i>
                <h3>No API Keys Yet</h3>
                <p>Add your first API key to get started</p>
                <button class="btn btn-primary" onclick="openAddKeyModal()">
                    <i class="fas fa-plus"></i> Add API Key
                </button>
            </div>
        `;
        return;
    }
    
    grid.innerHTML = keys.map(key => {
        const service = supportedServices.find(s => s.name === key.service_name) || {};
        const statusClass = `status-${key.status}`;
        const lastUsed = key.last_used ? new Date(key.last_used).toLocaleDateString() : 'Never';
        
        return `
            <div class="api-key-card" data-service="${key.service_name}" data-category="${service.category || ''}" data-status="${key.status}">
                <div class="api-key-header">
                    <div class="api-key-info">
                        <h4>${service.display_name || key.service_name}</h4>
                        <div class="api-key-category">${service.category || 'Other'}</div>
                    </div>
                    <span class="api-key-status ${statusClass}">
                        <i class="fas fa-circle"></i> ${key.status}
                    </span>
                </div>
                
                <div class="api-key-details">
                    <div class="api-key-field">
                        <label>API Key</label>
                        <div class="api-key-value masked">
                            <span>${key.api_key}</span>
                            <button class="btn-icon" onclick="copyToClipboard('${key.api_key}', this)" title="Copy">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                    ${key.endpoint_url ? `
                    <div class="api-key-field">
                        <label>Endpoint</label>
                        <div class="api-key-value">
                            <span style="font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis;">${key.endpoint_url}</span>
                        </div>
                    </div>
                    ` : ''}
                </div>
                
                <div class="api-key-stats">
                    <div class="stat-item">
                        <label>Last Used</label>
                        <value>${lastUsed}</value>
                    </div>
                    <div class="stat-item">
                        <label>Usage Count</label>
                        <value>${key.usage_count || 0}</value>
                    </div>
                </div>
                
                <div class="api-key-actions">
                    <button class="btn btn-sm btn-info" onclick="testApiKeyById(${key.id})">
                        <i class="fas fa-vial"></i> Test
                    </button>
                    <button class="btn btn-sm btn-primary" onclick="editApiKey(${key.id})">
                        <i class="fas fa-edit"></i> Edit
                    </button>
                    <button class="btn btn-sm btn-danger" onclick="deleteApiKey(${key.id})">
                        <i class="fas fa-trash"></i> Delete
                    </button>
                </div>
            </div>
        `;
    }).join('');
}

// Search & Filter
function setupSearchFilter() {
    const searchInput = document.getElementById('searchKeys');
    const categoryFilter = document.getElementById('filterCategory');
    const statusFilter = document.getElementById('filterStatus');
    
    function filterKeys() {
        const searchTerm = searchInput.value.toLowerCase();
        const category = categoryFilter.value;
        const status = statusFilter.value;
        
        const filtered = apiKeys.filter(key => {
            const service = supportedServices.find(s => s.name === key.service_name) || {};
            const matchesSearch = !searchTerm || 
                key.service_name.toLowerCase().includes(searchTerm) ||
                (service.display_name || '').toLowerCase().includes(searchTerm);
            const matchesCategory = !category || service.category === category;
            const matchesStatus = !status || key.status === status;
            
            return matchesSearch && matchesCategory && matchesStatus;
        });
        
        renderApiKeys(filtered);
    }
    
    searchInput.addEventListener('input', filterKeys);
    categoryFilter.addEventListener('change', filterKeys);
    statusFilter.addEventListener('change', filterKeys);
}

// Modal Functions
function openAddKeyModal() {
    document.getElementById('modalTitle').textContent = 'Add API Key';
    document.getElementById('apiKeyForm').reset();
    document.getElementById('keyId').value = '';
    document.getElementById('testResult').classList.remove('show');
    document.getElementById('apiKeyModal').classList.add('active');
}

function editApiKey(id) {
    const key = apiKeys.find(k => k.id === id);
    if (!key) return;
    
    document.getElementById('modalTitle').textContent = 'Edit API Key';
    document.getElementById('keyId').value = key.id;
    document.getElementById('serviceName').value = key.service_name;
    document.getElementById('serviceName').dispatchEvent(new Event('change'));
    document.getElementById('apiKey').value = ''; // Don't show encrypted key
    document.getElementById('apiSecret').value = '';
    document.getElementById('endpointUrl').value = key.endpoint_url || '';
    document.getElementById('status').value = key.status;
    document.getElementById('testResult').classList.remove('show');
    document.getElementById('apiKeyModal').classList.add('active');
}

function closeModal() {
    document.getElementById('apiKeyModal').classList.remove('active');
}

function deleteApiKey(id) {
    document.getElementById('deleteKeyId').value = id;
    document.getElementById('deleteModal').classList.add('active');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.remove('active');
}

async function confirmDelete() {
    const id = document.getElementById('deleteKeyId').value;
    
    try {
        const response = await fetch(`/api/keys/${id}`, {
            method: 'DELETE'
        });
        
        const data = await response.json();
        
        if (data.success) {
            showToast('API key deleted successfully', 'success');
            closeDeleteModal();
            loadApiKeys();
        } else {
            showToast(data.error || 'Failed to delete API key', 'error');
        }
    } catch (error) {
        console.error('Delete failed:', error);
        showToast('Failed to delete API key', 'error');
    }
}

// Save API Key
async function saveApiKey() {
    const form = document.getElementById('apiKeyForm');
    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }
    
    const keyId = document.getElementById('keyId').value;
    const formData = {
        service_name: document.getElementById('serviceName').value,
        api_key: document.getElementById('apiKey').value,
        api_secret: document.getElementById('apiSecret').value,
        endpoint_url: document.getElementById('endpointUrl').value,
        status: document.getElementById('status').value
    };
    
    try {
        const url = keyId ? `/api/keys/${keyId}` : '/api/keys';
        const method = keyId ? 'PUT' : 'POST';
        
        const response = await fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        });
        
        const data = await response.json();
        
        if (data.success) {
            showToast(keyId ? 'API key updated successfully' : 'API key added successfully', 'success');
            closeModal();
            loadApiKeys();
        } else {
            showToast(data.error || 'Failed to save API key', 'error');
        }
    } catch (error) {
        console.error('Save failed:', error);
        showToast('Failed to save API key', 'error');
    }
}

// Test API Key
async function testApiKey() {
    const keyId = document.getElementById('keyId').value;
    const testResult = document.getElementById('testResult');
    
    if (!keyId) {
        testResult.className = 'test-result error show';
        testResult.innerHTML = '<i class="fas fa-exclamation-circle"></i> Please save the API key first before testing';
        return;
    }
    
    testResult.className = 'test-result show';
    testResult.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Testing connection...';
    
    try {
        const response = await fetch(`/api/keys/${keyId}/test`, {
            method: 'POST'
        });
        
        const data = await response.json();
        
        if (data.success) {
            testResult.className = 'test-result success show';
            testResult.innerHTML = `<i class="fas fa-check-circle"></i> ${data.message}`;
        } else {
            testResult.className = 'test-result error show';
            testResult.innerHTML = `<i class="fas fa-times-circle"></i> ${data.message}`;
        }
    } catch (error) {
        testResult.className = 'test-result error show';
        testResult.innerHTML = `<i class="fas fa-times-circle"></i> Test failed: ${error.message}`;
    }
}

async function testApiKeyById(id) {
    showToast('Testing API key...', 'info');
    
    try {
        const response = await fetch(`/api/keys/${id}/test`, {
            method: 'POST'
        });
        
        const data = await response.json();
        
        if (data.success) {
            showToast(data.message, 'success');
        } else {
            showToast(data.message, 'error');
        }
    } catch (error) {
        showToast('Test failed: ' + error.message, 'error');
    }
}

// Utility Functions
function togglePasswordVisibility(fieldId) {
    const field = document.getElementById(fieldId);
    const toggle = document.getElementById(fieldId + 'Toggle');
    
    if (field.type === 'password') {
        field.type = 'text';
        toggle.classList.remove('fa-eye');
        toggle.classList.add('fa-eye-slash');
    } else {
        field.type = 'password';
        toggle.classList.remove('fa-eye-slash');
        toggle.classList.add('fa-eye');
    }
}

function copyToClipboard(text, button) {
    // Remove masking characters
    const cleanText = text.replace(/^\*+/, '');
    
    navigator.clipboard.writeText(cleanText).then(() => {
        const icon = button.querySelector('i');
        icon.classList.remove('fa-copy');
        icon.classList.add('fa-check');
        
        setTimeout(() => {
            icon.classList.remove('fa-check');
            icon.classList.add('fa-copy');
        }, 2000);
        
        showToast('Copied to clipboard', 'success');
    }).catch(err => {
        showToast('Failed to copy', 'error');
    });
}

function showToast(message, type = 'info') {
    // Use existing toast system from app.js if available
    if (typeof window.showToast === 'function') {
        window.showToast(message, type);
    } else {
        console.log(`[${type.toUpperCase()}] ${message}`);
    }
}
</script>
{% endblock %}