// static/js/profile.js

import { getAuthHeaders, handleApiError } from './utils.js';

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: getAuthHeaders()
        });
        
        if (!response.ok) throw new Error('Błąd ładowania historii');
        const orders = await response.json();
        renderOrderHistory(orders);
    } catch (error) {
        handleApiError(error, 'Nie udało się załadować historii zamówień');
    }
});

function renderOrderHistory(orders) {
    const container = document.getElementById('order-history');
    container.innerHTML = '';

    orders.forEach((order, index) => {
        const orderNumber = orders.length - index;
        const orderDate = new Date(order.data_zamowienia).toLocaleDateString();
        
        const itemsList = order.items.map(item => `
            <div class="order card mb-2">
                <div class="card-body">
                    <h6 class="card-subtitle mb-2">${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">
                    <div class="card-header">
                        <h5 class="card-title">Zamówienie #${orderNumber}</h5>
                        <p class="card-text">Data: ${orderDate}</p>
                    </div>
                    <div class="card-body">
                        <h6>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>${order.status || 'Przyjęto do realizacji'}</p>
                        </div>
                    </div>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', orderHTML);
    });
}