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

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

    // 1. 결과가 0개인 경우 (안내 텍스트만 출력)
    if (state.visibleProducts.length === 0) {
        grid.classList.remove('grid'); // 중앙 정렬을 위해 그리드 해제
        grid.innerHTML = `
            <div class="flex flex-col items-center justify-center py-20 w-full text-center">
                <span class="material-symbols-outlined text-6xl text-slate-300 dark:text-slate-700 mb-4">
                    search_off
                </span>
                <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">검색 결과가 없습니다</h3>
                <p class="text-slate-500 dark:text-slate-400 text-sm">
                    입력하신 검색어나 선택한 필터를 확인해 주세요.
                </p>
            </div>
        `;
        
        if (paginationContainer) paginationContainer.innerHTML = '';
        return;
    }

    // 2. 결과가 있을 경우 (그리드 복구 및 초기화)
    grid.classList.add('grid');
    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">
                    <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>
                <div class="flex flex-col gap-1">
                    <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-500 dark:text-slate-400 text-sm font-normal line-clamp-1">${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' });
}

/** 모든 필터를 초기 상태로 되돌리는 함수 */
function resetAllFilters() {
    state.searchKeyword = '';
    const searchInput = document.getElementById('search-input');
    if (searchInput) searchInput.value = '';

    state.activeCategories.clear();
    state.activeCategories.add('All');

    // 상태 필터 초기화 (config에서 defaultActive인 것만)
    import('./config.js').then(({ STATUS_FILTERS }) => {
        state.activeStatuses.clear();
        STATUS_FILTERS.filter(f => f.defaultActive).forEach(f => state.activeStatuses.add(f.key));
        
        // UI 전체 갱신
        applyFilters();
        renderStatusChips();
        renderCategoryChips(productsData);
    });
}