const API_BASE = '/api';

let currentTab = 'products';
let editingProductId = null;

// Tab switching
function switchTab(tab) {
    currentTab = tab;
    
    // Update tab buttons
    document.querySelectorAll('.admin-tab').forEach(btn => {
        btn.classList.remove('active');
    });
    event.target.classList.add('active');
    
    // Update content
    document.querySelectorAll('.admin-content').forEach(content => {
        content.classList.remove('active');
    });
    document.getElementById(tab + 'Tab').classList.add('active');
    
    // Load data for the tab
    if (tab === 'products') {
        loadProducts();
    } else if (tab === 'orders') {
        loadOrders();
    } else if (tab === 'regions') {
        loadRegions();
    } else if (tab === 'translations') {
        loadTranslations();
    } else if (tab === 'currency') {
        loadCurrencyRates();
    }
}

// Product Management
async function loadProducts() {
    const container = document.getElementById('productsList');
    
    try {
        const response = await fetch(`${API_BASE}/products`);
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || 'Failed to load products');
        }
        
        if (data.products.length === 0) {
            container.innerHTML = '<div style="padding: 2rem; text-align: center; color: #666;">No products found. Add your first product!</div>';
            return;
        }
        
        container.innerHTML = `
            <table>
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Stock</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    ${data.products.map(product => `
                        <tr>
                            <td>
                                ${product.image && product.image.trim() && (product.image.startsWith('http') || product.image.startsWith('/'))
                                    ? `<img src="${escapeHtml(product.image)}" alt="${escapeHtml(product.name)}" style="width: 60px; height: 60px; object-fit: cover; border-radius: 4px;" onerror="this.style.display='none'">`
                                    : '<div style="width: 60px; height: 60px; background: #f0f0f0; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #999;">No Image</div>'}
                            </td>
                            <td><strong>${escapeHtml(product.name)}</strong></td>
                            <td>${escapeHtml(product.category || 'general')}</td>
                            <td>
                                ${product.currency} ${(product.price / 100).toFixed(2)}
                                <br><small style="color: #666;">${product.taxIncluded ? '(tax included)' : '(tax excluded)'}</small>
                            </td>
                            <td>${product.stock === null ? 'Unlimited' : product.stock}</td>
                            <td>
                                <button class="btn btn-small" onclick="editProduct('${product.id}')">Edit</button>
                                <button class="btn btn-small btn-danger" onclick="deleteProduct('${product.id}')">Delete</button>
                            </td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        `;
    } catch (error) {
        container.innerHTML = `<div class="error">Error: ${error.message}</div>`;
    }
}

function openProductForm(productId = null) {
    editingProductId = productId;
    const form = document.getElementById('productForm');
    const title = document.getElementById('formTitle');
    
    if (productId) {
        title.textContent = 'Edit Product';
        loadProductForEdit(productId);
    } else {
        title.textContent = 'Add New Product';
        document.getElementById('productFormElement').reset();
        document.getElementById('imagePreviewContainer').style.display = 'none';
    }
    
    form.style.display = 'block';
    form.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function closeProductForm() {
    document.getElementById('productForm').style.display = 'none';
    editingProductId = null;
    document.getElementById('productFormElement').reset();
    document.getElementById('imagePreviewContainer').style.display = 'none';
}

async function loadProductForEdit(productId) {
    try {
        const response = await fetch(`${API_BASE}/products/${productId}`);
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || 'Product not found');
        }
        
        const product = data.product;
        document.getElementById('productId').value = product.id;
        document.getElementById('productName').value = product.name;
        document.getElementById('productDescription').value = product.description || '';
        document.getElementById('productPrice').value = (product.price / 100).toFixed(2);
        document.getElementById('productCurrency').value = product.currency;
        document.getElementById('productStock').value = product.stock || '';
        document.getElementById('productCategory').value = product.category || 'general';
        document.getElementById('productImage').value = product.image || '';
        document.getElementById('productTaxIncluded').value = product.taxIncluded ? 'true' : 'false';
        
        // Show image preview if URL is provided
        if (product.image && product.image.trim()) {
            const preview = document.getElementById('imagePreview');
            preview.src = product.image;
            document.getElementById('imagePreviewContainer').style.display = 'block';
        }
    } catch (error) {
        showNotification(`Error loading product: ${error.message}`, 'error');
    }
}

async function handleProductSubmit(event) {
    event.preventDefault();
    
    const form = event.target;
    const formData = new FormData(form);
    
    const productData = {
        name: formData.get('name'),
        description: formData.get('description') || '',
        price: parseFloat(formData.get('price')),
        currency: formData.get('currency'),
        stock: formData.get('stock') ? parseInt(formData.get('stock')) : null,
        category: formData.get('category') || 'general',
        image: formData.get('image') || '',
        taxIncluded: formData.get('taxIncluded') === 'true'
    };
    
    const submitBtn = form.querySelector('button[type="submit"]');
    submitBtn.disabled = true;
    submitBtn.textContent = 'Saving...';
    
    try {
        const url = editingProductId 
            ? `${API_BASE}/products/${editingProductId}`
            : `${API_BASE}/products`;
        const method = editingProductId ? 'PUT' : 'POST';
        
        const response = await fetchWithCsrf(url, {
            method,
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(productData)
        });
        
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || 'Failed to save product');
        }
        
        // Token is already refreshed by fetchWithCsrf, but ensure button is re-enabled
        submitBtn.disabled = false;
        submitBtn.textContent = 'Save Product';
        
        showNotification(`Product ${editingProductId ? 'updated' : 'created'} successfully!`, 'success');
        closeProductForm();
        loadProducts();
    } catch (error) {
        showNotification(`Error: ${error.message}`, 'error');
        submitBtn.disabled = false;
        submitBtn.textContent = 'Save Product';
        
        // Refresh CSRF token even on error (token might have been invalidated)
        if (window.refreshCsrfToken) {
            await window.refreshCsrfToken();
        }
    }
}

async function deleteProduct(productId) {
    const confirmed = await showConfirm(
        'Are you sure you want to delete this product? This action cannot be undone.',
        'Delete Product'
    );
    
    if (!confirmed) {
        return;
    }
    
    try {
        const response = await fetchWithCsrf(`${API_BASE}/products/${productId}`, {
            method: 'DELETE'
        });
        
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || 'Failed to delete product');
        }
        
        showNotification('Product deleted successfully!', 'success');
        loadProducts();
    } catch (error) {
        showNotification(`Error: ${error.message}`, 'error');
    }
}

function editProduct(productId) {
    openProductForm(productId);
}

// Image preview
document.getElementById('productImage')?.addEventListener('input', function(e) {
    const url = e.target.value.trim();
    const previewContainer = document.getElementById('imagePreviewContainer');
    const preview = document.getElementById('imagePreview');
    
    if (url && (url.startsWith('http') || url.startsWith('/'))) {
        preview.src = url;
        preview.onerror = function() {
            previewContainer.style.display = 'none';
        };
        preview.onload = function() {
            previewContainer.style.display = 'block';
        };
    } else {
        previewContainer.style.display = 'none';
    }
});

// Order Management
async function loadOrders() {
    const container = document.getElementById('ordersList');
    
    try {
        // Get all orders - we'll need to modify the orders route to support this
        // For now, we'll fetch from a new endpoint or modify existing one
        const response = await fetch(`${API_BASE}/orders`);
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || 'Failed to load orders');
        }
        
        if (data.orders.length === 0) {
            container.innerHTML = '<div style="padding: 2rem; text-align: center; color: #666;">No orders found.</div>';
            return;
        }
        
        container.innerHTML = `
            <table>
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Customer</th>
                        <th>Items</th>
                        <th>Total</th>
                        <th>Status</th>
                        <th>Tracking</th>
                        <th>Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    ${data.orders.map(order => `
                        <tr>
                            <td><strong>${order.orderId}</strong></td>
                            <td>
                                ${order.customerInfo?.email || 'N/A'}<br>
                                <small style="color: #666;">${order.customerInfo?.firstName || ''} ${order.customerInfo?.lastName || ''}</small>
                            </td>
                            <td>
                                ${order.items.map(item => `${item.productName} x${item.quantity}`).join('<br>')}
                            </td>
                            <td><strong>${order.currency} ${(order.total / 100).toFixed(2)}</strong></td>
                            <td>
                                <span class="status-badge status-${order.status}">${order.status}</span>
                            </td>
                            <td>
                                ${order.trackingId ? `<strong>${escapeHtml(order.trackingId)}</strong><br><small style="color: #666;">${order.carrier || ''}</small>` : '<span style="color: #999;">—</span>'}
                            </td>
                            <td>${new Date(order.createdAt).toLocaleString()}</td>
                            <td>
                                <button class="btn btn-small" onclick="viewOrder('${order.orderId}')">View</button>
                                <button class="btn btn-small" onclick="updateOrderStatus('${order.orderId}')">Update</button>
                            </td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        `;
    } catch (error) {
        container.innerHTML = `<div class="error">Error: ${error.message}</div>`;
    }
}

async function viewOrder(orderId) {
    try {
        const response = await fetch(`${API_BASE}/orders/${orderId}`);
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || 'Order not found');
        }
        
        const order = data.order;
        const itemsHtml = order.items.map(item => `
            <tr>
                <td>${escapeHtml(item.productName)}</td>
                <td>${item.quantity}</td>
                <td>${order.currency} ${(item.price / 100).toFixed(2)}</td>
                <td>${order.currency} ${(item.total / 100).toFixed(2)}</td>
            </tr>
        `).join('');
        const modal = `
            <div class="order-modal-overlay" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 2rem;">
                <div style="background: white; border-radius: 12px; padding: 2rem; max-width: 800px; max-height: 90vh; overflow-y: auto; width: 100%;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
                        <h3>Order Details: ${order.orderId}</h3>
                        <button onclick="this.closest('.order-modal-overlay').remove()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer;">&times;</button>
                    </div>
                    
                    <div style="margin-bottom: 1.5rem;">
                        <h4>Customer Information</h4>
                        <p><strong>Email:</strong> ${order.customerInfo?.email || 'N/A'}</p>
                        <p><strong>Name:</strong> ${order.customerInfo?.firstName || ''} ${order.customerInfo?.lastName || ''}</p>
                        <p><strong>Phone:</strong> ${order.customerInfo?.phone || 'N/A'}</p>
                    </div>
                    
                    <div style="margin-bottom: 1.5rem;">
                        <h4>Shipping Address</h4>
                        <p>${order.shippingInfo?.name || 'N/A'}<br>
                        ${order.shippingInfo?.address || ''}<br>
                        ${order.shippingInfo?.city || ''}, ${order.shippingInfo?.state || ''} ${order.shippingInfo?.zip || ''}<br>
                        ${order.shippingInfo?.country || ''}</p>
                    </div>
                    
                    <div style="margin-bottom: 1.5rem;">
                        <h4>Order Items</h4>
                        <table style="width: 100%; border-collapse: collapse;">
                            <thead>
                                <tr style="background: #f8f9fa;">
                                    <th style="padding: 0.5rem; text-align: left;">Product</th>
                                    <th style="padding: 0.5rem; text-align: left;">Quantity</th>
                                    <th style="padding: 0.5rem; text-align: left;">Price</th>
                                    <th style="padding: 0.5rem; text-align: left;">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${itemsHtml}
                            </tbody>
                        </table>
                    </div>
                    
                    <div>
                        <p><strong>Subtotal:</strong> ${order.currency} ${(order.subtotal / 100).toFixed(2)}</p>
                        ${order.shippingInfo?.cost > 0 ? `<p><strong>Shipping:</strong> ${order.currency} ${(order.shippingInfo.cost / 100).toFixed(2)}</p>` : ''}
                        ${order.shippingInfo?.tax > 0 ? `<p><strong>Tax:</strong> ${order.currency} ${(order.shippingInfo.tax / 100).toFixed(2)}</p>` : ''}
                        <p><strong>Total:</strong> ${order.currency} ${(order.total / 100).toFixed(2)}</p>
                        <p><strong>Status:</strong> <span class="status-badge status-${order.status}">${order.status}</span></p>
                        ${order.trackingId ? `<p><strong>Tracking ID:</strong> ${escapeHtml(order.trackingId)}</p>` : ''}
                        ${order.carrier ? `<p><strong>Carrier:</strong> ${escapeHtml(order.carrier)}</p>` : ''}
                        ${order.notes ? `<p><strong>Notes:</strong> ${escapeHtml(order.notes)}</p>` : ''}
                        <p><strong>Date:</strong> ${new Date(order.createdAt).toLocaleString()}</p>
                    </div>
                </div>
            </div>
        `;
        
        document.body.insertAdjacentHTML('beforeend', modal);
    } catch (error) {
        showNotification(`Error: ${error.message}`, 'error');
    }
}

async function updateOrderStatus(orderId) {
    // Fetch current order to get existing values
    let currentOrder = null;
    try {
        const response = await fetch(`${API_BASE}/orders/${orderId}`);
        const data = await response.json();
        if (data.success) {
            currentOrder = data.order;
        }
    } catch (error) {
        console.error('Error fetching order:', error);
    }
    
    // Create modal with dropdown and tracking fields
    const overlay = document.createElement('div');
    overlay.className = 'confirm-dialog-overlay';
    
    overlay.innerHTML = `
        <div class="confirm-dialog" style="max-width: 600px;">
            <div class="confirm-dialog-title">Update Order</div>
            <form id="updateOrderForm" onsubmit="handleOrderUpdate(event, '${orderId}')">
                <div class="form-group" style="margin-bottom: 1.5rem;">
                    <label>Status *</label>
                    <select id="orderStatus" name="status" required style="width: 100%; padding: 0.875rem; border: 2px solid var(--border-color); border-radius: 10px; font-size: 1rem;">
                        <option value="pending" ${currentOrder?.status === 'pending' ? 'selected' : ''}>Pending</option>
                        <option value="processing" ${currentOrder?.status === 'processing' ? 'selected' : ''}>Processing</option>
                        <option value="completed" ${currentOrder?.status === 'completed' ? 'selected' : ''}>Completed</option>
                        <option value="cancelled" ${currentOrder?.status === 'cancelled' ? 'selected' : ''}>Cancelled</option>
                    </select>
                </div>
                
                <div class="form-group" style="margin-bottom: 1.5rem;">
                    <label>Tracking ID</label>
                    <input type="text" id="trackingId" name="trackingId" placeholder="e.g., 1Z999AA10123456784" value="${currentOrder?.trackingId || ''}" style="width: 100%; padding: 0.875rem; border: 2px solid var(--border-color); border-radius: 10px; font-size: 1rem;">
                    <small style="color: #666; font-size: 0.85rem;">Enter shipping tracking number</small>
                </div>
                
                <div class="form-group" style="margin-bottom: 1.5rem;">
                    <label>Carrier</label>
                    <input type="text" id="carrier" name="carrier" placeholder="e.g., UPS, FedEx, DHL" value="${currentOrder?.carrier || ''}" style="width: 100%; padding: 0.875rem; border: 2px solid var(--border-color); border-radius: 10px; font-size: 1rem;">
                    <small style="color: #666; font-size: 0.85rem;">Shipping carrier name</small>
                </div>
                
                <div class="form-group" style="margin-bottom: 1.5rem;">
                    <label>Notes</label>
                    <textarea id="notes" name="notes" placeholder="Internal notes about this order" rows="3" style="width: 100%; padding: 0.875rem; border: 2px solid var(--border-color); border-radius: 10px; font-size: 1rem; font-family: inherit; resize: vertical;">${currentOrder?.notes || ''}</textarea>
                    <small style="color: #666; font-size: 0.85rem;">Internal notes (not visible to customer)</small>
                </div>
                
                <div class="confirm-dialog-actions">
                    <button type="button" class="btn-cancel" onclick="this.closest('.confirm-dialog-overlay').remove()">Cancel</button>
                    <button type="submit" class="btn-confirm">Update Order</button>
                </div>
            </form>
        </div>
    `;
    
    document.body.appendChild(overlay);
    
    // Close on overlay click
    overlay.addEventListener('click', (e) => {
        if (e.target === overlay) {
            overlay.remove();
        }
    });
}

async function handleOrderUpdate(event, orderId) {
    event.preventDefault();
    const form = event.target;
    const formData = new FormData(form);
    
    const updateData = {
        status: formData.get('status'),
        trackingId: formData.get('trackingId') || null,
        carrier: formData.get('carrier') || null,
        notes: formData.get('notes') || null
    };
    
    // Remove null/empty values
    Object.keys(updateData).forEach(key => {
        if (updateData[key] === null || updateData[key] === '') {
            delete updateData[key];
        }
    });
    
    try {
        const response = await fetchWithCsrf(`${API_BASE}/orders/${orderId}/status`, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(updateData)
        });
        
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || 'Failed to update order');
        }
        
        // Close modal
        event.target.closest('.confirm-dialog-overlay').remove();
        
        showNotification('Order updated successfully!', 'success');
        loadOrders();
    } catch (error) {
        showNotification(`Error: ${error.message}`, 'error');
    }
}

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

// ========================================
// REGION MANAGEMENT
// ========================================

let currentRegionFilter = 'all';

async function loadRegions() {
    const container = document.getElementById('regionsList');
    
    try {
        const response = await fetch(`${API_BASE}/admin/regions`);
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || 'Failed to load regions');
        }
        
        // Load stats
        const statsResponse = await fetch(`${API_BASE}/admin/regions/stats`);
        const statsData = await statsResponse.json();
        if (statsData.success) {
            document.getElementById('regionStats').innerHTML = `
                <strong>Total:</strong> ${statsData.total} | 
                <strong>Enabled:</strong> <span style="color: #28a745;">${statsData.enabled}</span> | 
                <strong>Disabled:</strong> <span style="color: #dc3545;">${statsData.disabled}</span>
            `;
        }
        
        const regions = data.regions.filter(region => {
            if (currentRegionFilter === 'enabled') return region.enabled;
            if (currentRegionFilter === 'disabled') return !region.enabled;
            return true;
        });
        
        if (regions.length === 0) {
            container.innerHTML = '<div style="padding: 2rem; text-align: center; color: #666;">No regions found.</div>';
            return;
        }
        
        container.innerHTML = `
            <table>
                <thead>
                    <tr>
                        <th>Country Code</th>
                        <th>Country Name</th>
                        <th>Language</th>
                        <th>Currency</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    ${regions.map(region => `
                        <tr>
                            <td><strong>${escapeHtml(region.countryCode)}</strong></td>
                            <td>${escapeHtml(region.countryName)}</td>
                            <td>${escapeHtml(region.languageCode)}</td>
                            <td>${escapeHtml(region.currencyCode)}</td>
                            <td>
                                <span class="status-badge ${region.enabled ? 'status-completed' : 'status-cancelled'}">
                                    ${region.enabled ? 'Enabled' : 'Disabled'}
                                </span>
                            </td>
                            <td>
                                ${region.enabled 
                                    ? `<button class="btn btn-small btn-danger" onclick="toggleRegion('${region.countryCode}', false)">Disable</button>`
                                    : `<button class="btn btn-small btn-success" onclick="toggleRegion('${region.countryCode}', true)">Enable</button>`
                                }
                            </td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        `;
    } catch (error) {
        container.innerHTML = `<div class="error">Error: ${error.message}</div>`;
    }
}

async function toggleRegion(countryCode, enable) {
    const action = enable ? 'enable' : 'disable';
    
    try {
        const response = await fetchWithCsrf(`${API_BASE}/admin/regions/${countryCode}/${action}`, {
            method: 'POST'
        });
        
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || `Failed to ${action} region`);
        }
        
        showNotification(`Region ${countryCode} ${enable ? 'enabled' : 'disabled'} successfully!`, 'success');
        loadRegions();
    } catch (error) {
        showNotification(`Error: ${error.message}`, 'error');
    }
}

function filterRegions(filter) {
    currentRegionFilter = filter;
    loadRegions();
}

// ========================================
// TRANSLATION MANAGEMENT
// ========================================

async function loadTranslations() {
    const container = document.getElementById('translationsList');
    container.innerHTML = `
        <div style="padding: 2rem; text-align: center;">
            <p style="color: #666; margin-bottom: 1rem;">Select a product to view/manage translations</p>
            <select id="translationProductSelect" onchange="loadProductTranslations(this.value)" style="padding: 0.5rem 1rem; border: 2px solid var(--border-color); border-radius: 8px; font-size: 1rem;">
                <option value="">Select a product...</option>
            </select>
        </div>
    `;
    
    // Load products for dropdown
    try {
        const response = await fetch(`${API_BASE}/products`);
        const data = await response.json();
        if (data.success && data.products.length > 0) {
            const select = document.getElementById('translationProductSelect');
            data.products.forEach(product => {
                const option = document.createElement('option');
                option.value = product.id;
                option.textContent = `${product.name} (ID: ${product.id})`;
                select.appendChild(option);
            });
        }
    } catch (error) {
        console.error('Failed to load products:', error);
    }
}

async function loadProductTranslations(productId) {
    if (!productId) return;
    
    const container = document.getElementById('translationsList');
    
    try {
        const response = await fetch(`${API_BASE}/admin/translations/product/${productId}`);
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || 'Failed to load translations');
        }
        
        if (data.translations.length === 0) {
            container.innerHTML = '<div style="padding: 2rem; text-align: center; color: #666;">No translations found for this product. Add your first translation!</div>';
            return;
        }
        
        container.innerHTML = `
            <table>
                <thead>
                    <tr>
                        <th>Field</th>
                        <th>Language</th>
                        <th>Translation</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    ${data.translations.map(trans => `
                        <tr>
                            <td><strong>${escapeHtml(trans.fieldName)}</strong></td>
                            <td>
                                <span class="status-badge status-processing">${escapeHtml(trans.languageCode).toUpperCase()}</span>
                            </td>
                            <td style="max-width: 400px;">${escapeHtml(trans.translatedText)}</td>
                            <td>
                                <button class="btn btn-small btn-danger" onclick="deleteTranslation('${trans.id}')">Delete</button>
                            </td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        `;
    } catch (error) {
        container.innerHTML = `<div class="error">Error: ${error.message}</div>`;
    }
}

function openTranslationForm() {
    document.getElementById('translationForm').style.display = 'block';
    document.getElementById('translationFormElement').reset();
}

function closeTranslationForm() {
    document.getElementById('translationForm').style.display = 'none';
}

async function handleTranslationSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const formData = new FormData(form);
    
    const translationData = {
        entityType: formData.get('entityType'),
        entityId: formData.get('entityId'),
        fieldName: formData.get('fieldName'),
        languageCode: formData.get('languageCode'),
        translatedText: formData.get('translatedText')
    };
    
    try {
        const response = await fetchWithCsrf(`${API_BASE}/admin/translations`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(translationData)
        });
        
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || 'Failed to save translation');
        }
        
        closeTranslationForm();
        showNotification('Translation saved successfully!', 'success');
        
        // Reload if a product was selected
        const selectedProduct = document.getElementById('translationProductSelect')?.value;
        if (selectedProduct && selectedProduct === translationData.entityId) {
            loadProductTranslations(selectedProduct);
        }
    } catch (error) {
        showNotification(`Error: ${error.message}`, 'error');
    }
}

async function deleteTranslation(translationId) {
    if (!confirm('Are you sure you want to delete this translation?')) {
        return;
    }
    
    try {
        const response = await fetchWithCsrf(`${API_BASE}/admin/translations/${translationId}`, {
            method: 'DELETE'
        });
        
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || 'Failed to delete translation');
        }
        
        showNotification('Translation deleted successfully!', 'success');
        
        // Reload current product translations
        const selectedProduct = document.getElementById('translationProductSelect')?.value;
        if (selectedProduct) {
            loadProductTranslations(selectedProduct);
        }
    } catch (error) {
        showNotification(`Error: ${error.message}`, 'error');
    }
}

// ========================================
// CURRENCY MANAGEMENT
// ========================================

async function loadCurrencyRates() {
    const container = document.getElementById('currencyRatesList');
    
    try {
        const response = await fetch(`${API_BASE}/currency/rates`);
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || 'Failed to load exchange rates');
        }
        
        // Update info panel
        if (data.rates && data.rates.length > 0) {
            const latestRate = data.rates[0];
            const fetchedDate = new Date(latestRate.fetchedAt);
            const expiresDate = new Date(latestRate.expiresAt);
            const now = new Date();
            const isExpired = now > expiresDate;
            
            document.getElementById('lastUpdated').innerHTML = `
                ${fetchedDate.toLocaleString()}
                ${isExpired ? '<br><span style="color: #e74c3c; font-weight: bold;">⚠️ EXPIRED</span>' : ''}
            `;
            document.getElementById('totalRates').textContent = data.rates.length;
        }
        
        if (data.rates.length === 0) {
            container.innerHTML = '<div style="padding: 2rem; text-align: center; color: #666;">No exchange rates found. Click "Refresh Rates Now" to fetch rates.</div>';
            return;
        }
        
        container.innerHTML = `
            <table>
                <thead>
                    <tr>
                        <th>From</th>
                        <th>To</th>
                        <th>Rate</th>
                        <th>Example</th>
                        <th>Updated</th>
                        <th>Expires</th>
                    </tr>
                </thead>
                <tbody>
                    ${data.rates.map(rate => {
                        const expiresDate = new Date(rate.expiresAt);
                        const now = new Date();
                        const isExpired = now > expiresDate;
                        
                        return `
                        <tr style="${isExpired ? 'opacity: 0.6;' : ''}">
                            <td><strong>${escapeHtml(rate.fromCurrency)}</strong></td>
                            <td><strong>${escapeHtml(rate.toCurrency)}</strong></td>
                            <td style="font-family: monospace; font-size: 1.1rem;">${rate.rate.toFixed(4)}</td>
                            <td style="color: #666; font-size: 0.9rem;">
                                1 ${rate.fromCurrency} = ${rate.rate.toFixed(2)} ${rate.toCurrency}
                            </td>
                            <td>${new Date(rate.fetchedAt).toLocaleString()}</td>
                            <td>
                                <span class="status-badge ${isExpired ? 'status-cancelled' : 'status-completed'}">
                                    ${isExpired ? 'Expired' : new Date(rate.expiresAt).toLocaleTimeString()}
                                </span>
                            </td>
                        </tr>
                    `}).join('')}
                </tbody>
            </table>
        `;
    } catch (error) {
        container.innerHTML = `<div class="error">Error: ${error.message}</div>`;
    }
}

async function refreshExchangeRates() {
    const btn = event.target;
    btn.disabled = true;
    btn.textContent = 'Refreshing...';
    
    try {
        const response = await fetchWithCsrf(`${API_BASE}/currency/admin/refresh`, {
            method: 'POST'
        });
        
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.error || 'Failed to refresh rates');
        }
        
        showNotification('Exchange rates refreshed successfully!', 'success');
        
        // Wait a moment for the rates to be saved
        setTimeout(() => {
            loadCurrencyRates();
        }, 1000);
    } catch (error) {
        showNotification(`Error: ${error.message}`, 'error');
    } finally {
        btn.disabled = false;
        btn.textContent = 'Refresh Rates Now';
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', () => {
    loadProducts();
    
    // Make functions global
    window.switchTab = switchTab;
    window.openProductForm = openProductForm;
    window.closeProductForm = closeProductForm;
    window.handleProductSubmit = handleProductSubmit;
    window.deleteProduct = deleteProduct;
    window.editProduct = editProduct;
    window.viewOrder = viewOrder;
    window.updateOrderStatus = updateOrderStatus;
    window.handleOrderUpdate = handleOrderUpdate;
    
    // Region management
    window.loadRegions = loadRegions;
    window.toggleRegion = toggleRegion;
    window.filterRegions = filterRegions;
    
    // Translation management
    window.loadTranslations = loadTranslations;
    window.loadProductTranslations = loadProductTranslations;
    window.openTranslationForm = openTranslationForm;
    window.closeTranslationForm = closeTranslationForm;
    window.handleTranslationSubmit = handleTranslationSubmit;
    window.deleteTranslation = deleteTranslation;
    
    // Currency management
    window.loadCurrencyRates = loadCurrencyRates;
    window.refreshExchangeRates = refreshExchangeRates;
});