document.addEventListener('DOMContentLoaded', function() {
    loadOrderHistory();
});

async function loadOrderHistory() {
    const orderHistoryContainer = document.getElementById('order-history');
    
    if (!orderHistoryContainer) return;
    
    orderHistoryContainer.innerHTML = `
        <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Ładowanie...</span>
            </div>
        </div>
    `;
    
    try {
        const response = await fetch('/api/order-history', {
            credentials: 'include'
        });
        
        if (!response.ok) {
            throw new Error('Błąd ładowania historii zamówień');
        }
        
        const orders = await response.json();
        displayOrderHistory(orders);
    } catch (error) {
        console.error('Błąd:', error);
        orderHistoryContainer.innerHTML = `
            <div class="alert alert-danger">Wystąpił błąd podczas ładowania historii zamówień</div>
        `;
    }
}

function displayOrderHistory(orders) {
    const orderHistoryContainer = document.getElementById('order-history');
    
    if (!orderHistoryContainer) return;
    
    if (orders.length === 0) {
        orderHistoryContainer.innerHTML = `
            <div class="alert alert-info">Brak historii zamówień</div>
        `;
        return;
    }
    
    orderHistoryContainer.innerHTML = '';
    
    orders.forEach(order => {
        const orderDate = new Date(order.data_zamowienia).toLocaleDateString();
        
        let deliveryType = order.typ_dostawy || 'shipping';
        let deliveryText = '';
        
        if (deliveryType === 'local') {
            deliveryText = 'Odbiór lokalny';
        } else if (deliveryType === 'shipping') {
            deliveryText = 'Dostawa';
        } else {
            deliveryText = 'Dostawa';
        }
        
        const orderElement = `
            <div class="card mb-3 order-card">
                <div class="card-header">
                    <h5>Zamówienie #${order.id} - ${orderDate}</h5>
                    <p class="mb-0">Status: ${order.status || 'W realizacji'}</p>
                    <p class="mb-0">Suma: ${order.suma_totalna} PLN</p>
                    <p class="mb-0">Typ: ${deliveryText}</p>
                </div>
                <div class="card-body">
                    <h6>Produkty:</h6>
                    <ul class="list-group">
                        ${order.items.map(item => `
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>${item.tytul}</strong> - ${item.autor}
                                </div>
                                <div>
                                    ${item.ilosc} x ${item.cena} PLN
                                </div>
                            </li>
                        `).join('')}
                    </ul>
                </div>
            </div>
        `;
        orderHistoryContainer.innerHTML += orderElement;
    });
}