let apiKey = localStorage.getItem('apiKey');

function updateUI() {
    const hasKey = !!apiKey;
    document.getElementById('noKeySection').classList.toggle('hidden', hasKey);
    document.getElementById('hasKeySection').classList.toggle('hidden', !hasKey);
    document.getElementById('uploadSection').classList.toggle('hidden', !hasKey);
    document.getElementById('filesSection').classList.toggle('hidden', !hasKey);

    if (hasKey) {
        document.getElementById('apiKeyDisplay').textContent = apiKey;
        loadFiles();
    }
}

async function generateKey() {
    const messageDiv = document.getElementById('authMessage');
    try {
        const response = await fetch('/add-user', {
            method: 'POST'
        });
        const result = await response.json();

        if (response.ok) {
            apiKey = result.api_key;
            localStorage.setItem('apiKey', apiKey);
            messageDiv.innerHTML = '<div class="message success">API key generated successfully!</div>';
            updateUI();
        } else {
            messageDiv.innerHTML = `<div class="message error">${result.detail}</div>`;
        }
    } catch (error) {
        messageDiv.innerHTML = '<div class="message error">Failed to generate key</div>';
    }
}

function useExistingKey() {
    const key = document.getElementById('existingKey').value.trim();
    const messageDiv = document.getElementById('authMessage');

    if (!key) {
        messageDiv.innerHTML = '<div class="message error">Please enter an API key</div>';
        return;
    }

    apiKey = key;
    localStorage.setItem('apiKey', apiKey);
    messageDiv.innerHTML = '<div class="message success">API key set!</div>';
    document.getElementById('existingKey').value = '';
    updateUI();
}

function clearKey() {
    apiKey = null;
    localStorage.removeItem('apiKey');
    document.getElementById('authMessage').innerHTML = '';
    updateUI();
}

async function uploadFiles() {
    const input = document.getElementById('fileInput');
    const files = input.files;
    const messageDiv = document.getElementById('uploadMessage');

    if (files.length === 0) {
        messageDiv.innerHTML = '<div class="message error">Please select files</div>';
        return;
    }

    const formData = new FormData();
    for (let file of files) {
        formData.append('files', file);
    }

    try {
        const response = await fetch('/upload', {
            method: 'POST',
            headers: {
                'X-API-Key': apiKey
            },
            body: formData
        });
        const result = await response.json();

        if (response.ok) {
            messageDiv.innerHTML = '<div class="message success">Files uploaded successfully!</div>';
            input.value = '';
            loadFiles();
        } else {
            messageDiv.innerHTML = `<div class="message error">${result.detail}</div>`;
        }
    } catch (error) {
        messageDiv.innerHTML = '<div class="message error">Upload failed</div>';
    }
}

async function loadFiles() {
    if (!apiKey) return;

    try {
        const response = await fetch('/files', {
            headers: {
                'X-API-Key': apiKey
            }
        });
        const files = await response.json();
        const fileList = document.getElementById('fileList');

        if (response.status === 401) {
            document.getElementById('authMessage').innerHTML = '<div class="message error">Invalid API key</div>';
            clearKey();
            return;
        }

        if (files.length === 0) {
            fileList.innerHTML = '<li>No files available</li>';
            return;
        }

        fileList.innerHTML = files.map(file => `
            <li class="file-item">
                <div>
                    <div><strong>${file.original_name}</strong> (${formatBytes(file.size)})&nbsp;<a href="/dn/${file.file_id}">Direct link to file</a></div>
                    <div class="file-date">Uploaded: ${new Date(file.uploaded_at).toLocaleString()}</div>
                </div>
                <div>
                    <button onclick="downloadFile('${file.file_id}', '${file.original_name}')">Download</button>
                    <button onclick="deleteFile('${file.file_id}')" style="background: #dc3545;">Delete</button>
                </div>
            </li>
        `).join('');
    } catch (error) {
        console.error('Failed to load files:', error);
    }
}

async function downloadFile(fileId, filename) {
    window.location.href = `/download/${fileId}?api_key=${apiKey}`;
}

async function deleteFile(fileId) {
    if (!confirm('Are you sure you want to delete this file?')) return;

    try {
        const response = await fetch(`/files/${fileId}`, {
            method: 'DELETE',
            headers: {
                'X-API-Key': apiKey
            }
        });

        if (response.ok) {
            loadFiles();
        } else {
            alert('Failed to delete file');
        }
    } catch (error) {
        alert('Failed to delete file');
    }
}

function formatBytes(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
}

// Initialize UI
updateUI();