ai_giga_tcg/app/static/manabox.js

// API base URL
const API_BASE_URL = '/api';

// Selected uploads for actions
let selectedUploads = new Set();

// Show toast notification
function showToast(message, type = 'success') {
    const toast = document.createElement('div');
    toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white ${
        type === 'success' ? 'bg-green-600' : 'bg-red-600'
    } transform translate-y-0 opacity-100 transition-all duration-300`;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.style.transform = 'translateY(100%)';
        toast.style.opacity = '0';
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

// Show loading state
function setLoading(isLoading) {
    const buttons = document.querySelectorAll('button');
    buttons.forEach(button => {
        if (isLoading) {
            button.disabled = true;
            button.classList.add('opacity-50', 'cursor-not-allowed');
        } else {
            button.disabled = false;
            button.classList.remove('opacity-50', 'cursor-not-allowed');
        }
    });
}

// Handle form submission
document.getElementById('uploadForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData();
    formData.append('file', document.getElementById('csvFile').files[0]);
    formData.append('source', document.getElementById('source').value);
    formData.append('description', document.getElementById('description').value);
    
    try {
        setLoading(true);
        const response = await fetch(`${API_BASE_URL}/manabox/process-csv`, {
            method: 'POST',
            body: formData
        });
        
        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.detail || 'Failed to upload CSV');
        }
        
        showToast('CSV uploaded successfully');
        document.getElementById('uploadForm').reset();
        fetchUploads(); // Refresh the uploads list
    } catch (error) {
        showToast('Error uploading CSV: ' + error.message, 'error');
    } finally {
        setLoading(false);
    }
});

// Fetch uploads from the API
async function fetchUploads() {
    try {
        setLoading(true);
        const response = await fetch(`${API_BASE_URL}/manabox/manabox-file-uploads`);
        if (!response.ok) {
            throw new Error('Failed to fetch uploads');
        }
        
        const uploads = await response.json();
        displayUploads(uploads);
    } catch (error) {
        showToast('Error fetching uploads: ' + error.message, 'error');
    } finally {
        setLoading(false);
    }
}

// Display uploads in the UI
function displayUploads(uploads) {
    const uploadsList = document.getElementById('uploadsList');
    uploadsList.innerHTML = '';
    
    if (!uploads || uploads.length === 0) {
        uploadsList.innerHTML = '<tr><td colspan="5" class="px-6 py-4 text-center text-gray-400">No uploads found</td></tr>';
        return;
    }
    
    uploads.forEach(upload => {
        const row = document.createElement('tr');
        row.className = 'hover:bg-gray-700';
        row.dataset.uploadId = upload.id;
        row.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap">
                <input type="checkbox" class="upload-checkbox rounded border-gray-600 bg-gray-800 text-blue-600 focus:ring-blue-500">
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">${upload.name || 'N/A'}</td>
            <td class="px-6 py-4 text-sm text-gray-300">${upload.file_metadata?.description || 'N/A'}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">${formatDate(upload.created_at)}</td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 py-1 text-xs rounded-full bg-green-900/50 text-green-300">Processed</span>
            </td>
        `;
        uploadsList.appendChild(row);
        
        // Add click event listener to the checkbox
        const checkbox = row.querySelector('.upload-checkbox');
        checkbox.addEventListener('change', () => {
            const uploadId = row.dataset.uploadId;
            if (checkbox.checked) {
                selectedUploads.add(uploadId);
            } else {
                selectedUploads.delete(uploadId);
            }
        });
    });
}

// Helper function to format date
function formatDate(dateString) {
    if (!dateString) return 'N/A';
    const date = new Date(dateString);
    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}

// Select all uploads
function selectAllUploads() {
    const checkboxes = document.querySelectorAll('.upload-checkbox');
    const allSelected = checkboxes.length > 0 && Array.from(checkboxes).every(checkbox => checkbox.checked);
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = !allSelected;
        const row = checkbox.closest('tr');
        const uploadId = row.dataset.uploadId;
        if (!allSelected) {
            selectedUploads.add(uploadId);
        } else {
            selectedUploads.delete(uploadId);
        }
    });
    
    showToast(allSelected ? 'All uploads deselected' : 'All uploads selected');
}

// Initialize the page
document.addEventListener('DOMContentLoaded', () => {
    fetchUploads();
    
    // Add event listener for the select all checkbox
    document.getElementById('selectAll').addEventListener('change', (e) => {
        const checkboxes = document.querySelectorAll('.upload-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = e.target.checked;
            const row = checkbox.closest('tr');
            const uploadId = row.dataset.uploadId;
            if (e.target.checked) {
                selectedUploads.add(uploadId);
            } else {
                selectedUploads.delete(uploadId);
            }
        });
    });
});