/** 상품 그리드·페이지네이션 렌더링 */
import { state } from './state.js';
import { ITEMS_PER_PAGE, STATUS_META } from './config.js';

export function renderProducts(page) {
    const grid = document.getElementById('product-grid');
    if (!grid) return;
    grid.innerHTML = '';

    const startIndex = (page - 1) * ITEMS_PER_PAGE;
    const pagedProducts = state.visibleProducts.slice(startIndex, startIndex + ITEMS_PER_PAGE);

    pagedProducts.forEach((product) => {
        const isSold = STATUS_META[product.status]?.soldOut === true;
        const cardHtml = `
            <div class="group flex flex-col gap-4 cursor-pointer" onclick="openModal('${product.id}')">
                <div class="relative w-full aspect-[4/5] bg-slate-50 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm group-hover:shadow-md transition-shadow">
                    <div class="w-full h-full bg-center bg-no-repeat bg-cover transform ${isSold ? 'grayscale opacity-80' : 'group-hover:scale-105'} transition-transform duration-500"
                         style="background-image: url('${product.images[0]}')"></div>
                    <div class="absolute top-3 left-3">
                        <span class="px-2 py-1 text-[10px] uppercase tracking-wider font-bold rounded ${isSold ? 'bg-slate-900/10 text-slate-500' : 'bg-primary/10 text-primary'} backdrop-blur-md border border-primary/20">
                            ${product.status}
                        </span>
                    </div>
                </div>
                <div class="flex flex-col gap-1">
                    <div class="flex flex-col sm:flex-row justify-between items-start">
                        <h3 class="text-slate-900 dark:text-white text-base font-semibold ${isSold ? 'line-through text-slate-400' : ''}">${product.title}</h3>
                        <p class="text-slate-900 dark:text-white text-base font-bold text-nowrap">${product.currency}${product.price.toLocaleString()}</p>
                    </div>
                    <p class="text-slate-500 dark:text-slate-400 text-sm font-normal">${product.description}</p>
                </div>
            </div>
        `;
        grid.insertAdjacentHTML('beforeend', cardHtml);
    });

    renderPagination();
}

export function renderPagination() {
    const container = document.getElementById('pagination');
    if (!container) return;
    const totalPages = Math.ceil(state.visibleProducts.length / ITEMS_PER_PAGE);
    const { currentPage } = state;

    let html = `<button onclick="changePage(${currentPage - 1})" class="size-10 flex items-center justify-center ${currentPage === 1 ? 'invisible' : ''}"><svg viewBox="0 0 24 24" fill="none"
     stroke="#64748B" stroke-width="3"
     stroke-linecap="round" stroke-linejoin="round"
     class="w-5 h-5">
  <path d="M15 18l-6-6 6-6" />
</svg>
</button>`;
    for (let i = 1; i <= totalPages; i++) {
        html += `<button onclick="changePage(${i})" class="size-10 font-bold rounded-lg ${i === currentPage ? 'bg-primary text-white' : 'text-slate-500'}">${i}</button>`;
    }
    html += `<button onclick="changePage(${currentPage + 1})" class="size-10 flex items-center justify-center ${currentPage === totalPages ? 'invisible' : ''}"><svg viewBox="0 0 24 24" fill="none"
     stroke="#64748B" stroke-width="3"
     stroke-linecap="round" stroke-linejoin="round"
     class="w-5 h-5">
  <path d="M9 18l6-6-6-6" />
</svg>
</button>`;
    container.innerHTML = html;
}

export function changePage(page) {
    state.currentPage = page;
    renderProducts(page);
    window.scrollTo({ top: 0, behavior: 'smooth' });
}