import { escapeHtml } from './utils.js';

export function renderPagination(container, pageData, { onPage, onSize, label = 'записей' } = {}) {
    if (!container) return;
    const totalItems = Number(pageData?.totalItems || 0);
    const page = Number(pageData?.page || 0);
    const size = Number(pageData?.size || 25);
    const totalPages = Math.max(Number(pageData?.totalPages || 0), totalItems ? 1 : 0);
    const start = totalItems ? page * size + 1 : 0;
    const end = Math.min((page + 1) * size, totalItems);

    container.innerHTML = `
        <div class="pagination-summary" aria-live="polite">
            Показано ${start}–${end} из ${totalItems} ${escapeHtml(label)}
        </div>
        <div class="pagination-actions">
            <label class="pagination-size">
                <span>На странице</span>
                <select data-pagination-size data-native-select="true">
                    ${[25, 50, 100].map(value => `<option value="${value}" ${value === size ? 'selected' : ''}>${value}</option>`).join('')}
                </select>
            </label>
            <button type="button" class="btn btn-sm btn-secondary" data-pagination-page="${page - 1}" ${page <= 0 ? 'disabled' : ''}>Назад</button>
            <span class="pagination-page">${totalPages ? page + 1 : 0} / ${totalPages}</span>
            <button type="button" class="btn btn-sm btn-secondary" data-pagination-page="${page + 1}" ${page >= totalPages - 1 ? 'disabled' : ''}>Далее</button>
        </div>
    `;
    container.querySelectorAll('[data-pagination-page]').forEach(button => {
        button.addEventListener('click', () => onPage?.(Number(button.dataset.paginationPage)));
    });
    container.querySelector('[data-pagination-size]')?.addEventListener('change', event => {
        onSize?.(Number(event.target.value));
    });
}