document.addEventListener('DOMContentLoaded', function() {
    const keysList = document.getElementById('api-keys-list');
    const keyModal = document.getElementById('key-modal');
    const keyResultModal = document.getElementById('key-result-modal');
    const deleteModal = document.getElementById('delete-key-modal');
    const keyForm = document.getElementById('key-form');
    let deleteTargetId = null;

    async function loadKeys() {
        try {
            const keys = await LinkSync.getApiKeys();
            renderKeys(Array.isArray(keys) ? keys : []);
        } catch (err) {
            keysList.innerHTML = `<div class="empty-state"><p>Failed to load API keys: ${err.message}</p></div>`;
        }
    }

    function renderKeys(keys) {
        if (!keys || keys.length === 0) {
            keysList.innerHTML = '<div class="empty-state"><p>No API keys found.</p><button class="btn btn-primary" id="empty-add-key-btn">+ Create your first API key</button></div>';
            document.getElementById('empty-add-key-btn').addEventListener('click', openKeyModal);
            return;
        }

        keysList.innerHTML = `
            <div class="data-table">
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Key ID</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Expires</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${keys.map(key => `
                            <tr>
                                <td>${escapeHtml(key.name)}</td>
                                <td class="key-value">${escapeHtml(key.key_id || key.id)}</td>
                                <td class="${key.is_active ? 'status-active' : 'status-inactive'}">${key.is_active ? 'Active' : 'Inactive'}</td>
                                <td>${formatDate(key.created_at)}</td>
                                <td>${key.expires_at ? formatDate(key.expires_at) : 'Never'}</td>
                                <td class="actions">
                                    <button class="btn-icon" data-action="delete" data-id="${key.key_id || key.id}" title="Delete">&#128465;</button>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
        `;

        keysList.querySelectorAll('[data-action="delete"]').forEach(btn => {
            btn.addEventListener('click', () => confirmDeleteKey(btn.dataset.id));
        });
    }

    function openKeyModal() {
        document.getElementById('key-name').value = '';
        keyModal.style.display = 'flex';
    }

    function closeKeyModal() {
        keyModal.style.display = 'none';
        keyForm.reset();
    }

    function closeKeyResultModal() {
        keyResultModal.style.display = 'none';
    }

    function closeDeleteModal() {
        deleteModal.style.display = 'none';
        deleteTargetId = null;
    }

    document.getElementById('new-key-btn').addEventListener('click', openKeyModal);
    document.getElementById('key-modal-close').addEventListener('click', closeKeyModal);
    document.getElementById('key-cancel-btn').addEventListener('click', closeKeyModal);
    document.getElementById('key-result-close').addEventListener('click', closeKeyResultModal);
    document.getElementById('key-done-btn').addEventListener('click', closeKeyResultModal);
    document.getElementById('delete-key-cancel-btn').addEventListener('click', closeDeleteModal);

    keyModal.querySelector('.modal-overlay').addEventListener('click', closeKeyModal);
    keyResultModal.querySelector('.modal-overlay').addEventListener('click', closeKeyResultModal);
    deleteModal.querySelector('.modal-overlay').addEventListener('click', closeDeleteModal);

    keyForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        const saveBtn = document.getElementById('key-save-btn');
        saveBtn.disabled = true;
        saveBtn.textContent = 'Creating...';

        const name = document.getElementById('key-name').value;

        try {
            const result = await LinkSync.createApiKey(name);
            closeKeyModal();
            document.getElementById('new-key-value').textContent = result.api_key;
            keyResultModal.style.display = 'flex';
            loadKeys();
        } catch (err) {
            alert('Failed to create API key: ' + err.message);
        } finally {
            saveBtn.disabled = false;
            saveBtn.textContent = 'Create';
        }
    });

    document.getElementById('copy-key-btn').addEventListener('click', function() {
        const key = document.getElementById('new-key-value').textContent;
        navigator.clipboard.writeText(key).then(() => {
            this.textContent = 'Copied!';
            setTimeout(() => { this.textContent = 'Copy'; }, 2000);
        });
    });

    function confirmDeleteKey(id) {
        deleteTargetId = id;
        deleteModal.style.display = 'flex';
    }

    document.getElementById('confirm-delete-key-btn').addEventListener('click', async function() {
        if (!deleteTargetId) return;
        try {
            await LinkSync.deleteApiKey(deleteTargetId);
            closeDeleteModal();
            loadKeys();
        } catch (err) {
            alert('Failed to delete API key: ' + err.message);
        }
    });

    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('action') === 'new') {
        openKeyModal();
    }

    loadKeys();

    function escapeHtml(str) {
        if (!str) return '';
        const div = document.createElement('div');
        div.textContent = str;
        return div.innerHTML;
    }

    function formatDate(dateStr) {
        if (!dateStr) return '-';
        const d = new Date(dateStr);
        return d.toLocaleDateString();
    }
});