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

// 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 z-50`;
    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 submitButton = document.querySelector('#createLabelForm button[type="submit"]');
    if (isLoading) {
        submitButton.disabled = true;
        submitButton.classList.add('opacity-50', 'cursor-not-allowed');
        submitButton.textContent = 'Creating...';
    } else {
        submitButton.disabled = false;
        submitButton.classList.remove('opacity-50', 'cursor-not-allowed');
        submitButton.textContent = 'Create Label';
    }
}

// Add metadata field
function addMetadataField() {
    const metadataFields = document.getElementById('metadataFields');
    const fieldId = Date.now(); // Simple unique ID
    
    const fieldDiv = document.createElement('div');
    fieldDiv.className = 'flex space-x-3 items-end';
    fieldDiv.innerHTML = `
        <div class="flex-1">
            <label class="block text-sm font-medium text-gray-300 mb-2">Key</label>
            <input 
                type="text" 
                name="metadata_key_${fieldId}"
                placeholder="e.g., product_name, condition, location..."
                class="w-full rounded-lg border-gray-600 bg-gray-700 text-gray-100 focus:ring-blue-500 focus:border-blue-500"
                required
            >
        </div>
        <div class="flex-1">
            <label class="block text-sm font-medium text-gray-300 mb-2">Value</label>
            <input 
                type="text" 
                name="metadata_value_${fieldId}"
                placeholder="e.g., Lightning Bolt, NM, Shelf A1..."
                class="w-full rounded-lg border-gray-600 bg-gray-700 text-gray-100 focus:ring-blue-500 focus:border-blue-500"
                required
            >
        </div>
        <button 
            type="button" 
            onclick="removeMetadataField(this)"
            class="px-3 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors"
        >
            Remove
        </button>
    `;
    
    metadataFields.appendChild(fieldDiv);
}

// Remove metadata field
function removeMetadataField(button) {
    button.closest('div').remove();
}

// Validate UPC code
function validateUPC(upc) {
    if (!upc) return true; // Empty UPC is valid (optional field)
    
    // Remove any non-digit characters
    const digitsOnly = upc.replace(/[^0-9]/g, '');
    
    // Check for valid lengths
    if (digitsOnly.length === 12) {
        return validateUPCAChecksum(digitsOnly);
    } else if (digitsOnly.length === 8) {
        return validateUPCChecksum(digitsOnly);
    } else if (digitsOnly.length === 13) {
        return validateEAN13Checksum(digitsOnly);
    }
    
    return false;
}

// Validate UPC-A checksum
function validateUPCAChecksum(upc) {
    if (upc.length !== 12 || !/^\d+$/.test(upc)) {
        return false;
    }
    
    let total = 0;
    for (let i = 0; i < 11; i++) {
        const digit = parseInt(upc[i]);
        if (i % 2 === 0) { // Odd positions (0-indexed)
            total += digit * 3;
        } else { // Even positions
            total += digit;
        }
    }
    
    const checksum = (10 - (total % 10)) % 10;
    return checksum === parseInt(upc[11]);
}

// Validate UPC-E checksum
function validateUPCChecksum(upc) {
    if (upc.length !== 8 || !/^\d+$/.test(upc)) {
        return false;
    }
    
    let total = 0;
    for (let i = 0; i < 7; i++) {
        const digit = parseInt(upc[i]);
        if (i % 2 === 0) { // Odd positions (0-indexed)
            total += digit * 3;
        } else { // Even positions
            total += digit;
        }
    }
    
    const checksum = (10 - (total % 10)) % 10;
    return checksum === parseInt(upc[7]);
}

// Validate EAN-13 checksum
function validateEAN13Checksum(ean) {
    if (ean.length !== 13 || !/^\d+$/.test(ean)) {
        return false;
    }
    
    let total = 0;
    for (let i = 0; i < 12; i++) {
        const digit = parseInt(ean[i]);
        if (i % 2 === 0) { // Even positions (0-indexed)
            total += digit;
        } else { // Odd positions
            total += digit * 3;
        }
    }
    
    const checksum = (10 - (total % 10)) % 10;
    return checksum === parseInt(ean[12]);
}

// Collect form data
function collectFormData() {
    const upc = document.getElementById('upc').value.trim();
    const print = document.getElementById('printLabel').checked;
    
    // Collect metadata
    const metadata = [];
    const metadataFields = document.querySelectorAll('#metadataFields input[type="text"]');
    
    for (let i = 0; i < metadataFields.length; i += 2) {
        const keyInput = metadataFields[i];
        const valueInput = metadataFields[i + 1];
        
        if (keyInput && valueInput && keyInput.value.trim() && valueInput.value.trim()) {
            metadata.push({
                key: keyInput.value.trim(),
                value: valueInput.value.trim()
            });
        }
    }
    
    return {
        upc: upc || null,
        metadata: metadata.length > 0 ? metadata : null,
        print: print
    };
}

// Create inventory label
async function createInventoryLabel(formData) {
    try {
        setLoading(true);
        
        const response = await fetch(`${API_BASE_URL}/inventory-labels/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData)
        });
        
        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.detail || 'Failed to create inventory label');
        }
        
        const result = await response.json();
        showToast('Inventory label created successfully!', 'success');
        
        // Reset form
        document.getElementById('createLabelForm').reset();
        document.getElementById('metadataFields').innerHTML = '';
        
        // Optionally refresh recent labels
        // loadRecentLabels();
        
        return result;
    } catch (error) {
        showToast('Error creating inventory label: ' + error.message, 'error');
        throw error;
    } finally {
        setLoading(false);
    }
}

// Handle form submission
async function handleFormSubmit(event) {
    event.preventDefault();
    
    const formData = collectFormData();
    
    // Validate UPC if provided
    if (formData.upc && !validateUPC(formData.upc)) {
        showToast('Invalid UPC code. Please enter a valid UPC-A, UPC-E, or EAN-13 code.', 'error');
        return;
    }
    
    // Validate metadata if provided
    if (formData.metadata) {
        for (const item of formData.metadata) {
            if (!item.key || !item.value) {
                showToast('All metadata fields must have both key and value.', 'error');
                return;
            }
        }
    }
    
    try {
        await createInventoryLabel(formData);
    } catch (error) {
        console.error('Error creating inventory label:', error);
    }
}

// Load recent labels (placeholder for future implementation)
async function loadRecentLabels() {
    // This could be implemented to show recently created labels
    // For now, it's a placeholder
    const recentLabelsDiv = document.getElementById('recentLabels');
    recentLabelsDiv.innerHTML = '<p class="text-gray-400 text-center">No recent labels to display</p>';
}

// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    // Set up form submission handler
    document.getElementById('createLabelForm').addEventListener('submit', handleFormSubmit);
    
    // Load recent labels
    loadRecentLabels();
    
    // Add initial metadata field
    addMetadataField();
});