document.addEventListener('DOMContentLoaded', async () => {
    try {
        const token = localStorage.getItem('token');
        if (!token) {
            window.location.href = '/login.html';
            return;
        }

        const response = await fetch('/api/order-history', {
            headers: { 'Authorization': `Bearer ${token}` }
        });
        
        if (!response.ok) throw new Error('Błąd ładowania historii');
        
        const orders = await response.json();
        const container = document.getElementById('order-history');
        container.innerHTML = '';

        orders.forEach(order => {
	    const orderDate = new Date(order.data_zamowienia).toLocaleDateString();
	    const itemsList = order.items.map(item => `
		<div class="card dark-card mb-2">
		    <div class="card-body">
			<h6 class="card-subtitle mb-2 text-muted">${item.tytul}</h6>
			<p class="card-text">Autor: ${item.autor}</p>
			<p class="card-text">Ilość: ${item.ilosc} × ${item.cena} PLN</p>
		    </div>
		</div>
	    `).join('');

	    const orderHTML = `
		<div class="mb-4">
		    <div class="card dark-card">
			<div class="card-header">
			    <h5 class="card-title">Zamówienie #${order.id}</h5>
			    <p class="card-text">Data: ${orderDate}</p>
			</div>
			<div class="card-body">
			    <h6 class="text-accent">Pozycje:</h6>
			    ${itemsList}
			    <hr class="bg-secondary">
			    <div class="d-flex justify-content-between">
				<p class="fw-bold">Suma całkowita:</p>
				<p class="fw-bold">${order.suma_totalna} PLN</p>
			    </div>
			    <div class="d-flex justify-content-between">
				<p>Status:</p>
				<p class="text-accent">${order.status || 'Przyjęto do realizacji'}</p>
			    </div>
			</div>
		    </div>
		</div>
	    `;
	    container.insertAdjacentHTML('beforeend', orderHTML);
	});

    } catch (error) {
        console.error('Error:', error);
        alert('Nie udało się załadować historii zamówień');
    }
});