/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

const ModelProperty = {
	TABLE_HTML: "table_html",
	ROW_COUNT: "row_count",
	PAGE_SIZE: "page_size",
	PAGE: "page",
};

const Event = {
	CHANGE_TABLE_HTML: `change:${ModelProperty.TABLE_HTML}`,
	CLICK: "click",
};

/**
 * Renders a paginated table and its controls into a given element.
 * @param {{
 * model: !Backbone.Model,
 * el: !HTMLElement
 * }} options
 */
function render({ model, el }) {
	const container = document.createElement("div");
	container.innerHTML = model.get(ModelProperty.TABLE_HTML);

	const buttonContainer = document.createElement("div");
	const prevPage = document.createElement("button");
	const label = document.createElement("span");
	const nextPage = document.createElement("button");

	prevPage.type = "button";
	nextPage.type = "button";
	prevPage.textContent = "Prev";
	nextPage.textContent = "Next";

	/** Updates the button states and page label based on the model. */
	function updateButtonStates() {
		const totalPages = Math.ceil(
			model.get(ModelProperty.ROW_COUNT) / model.get(ModelProperty.PAGE_SIZE),
		);
		const currentPage = model.get(ModelProperty.PAGE);

		label.textContent = `Page ${currentPage + 1} of ${totalPages}`;
		prevPage.disabled = currentPage === 0;
		nextPage.disabled = currentPage >= totalPages - 1;
	}

	/**
	 * Updates the page in the model.
	 * @param {number} direction -1 for previous, 1 for next.
	 */
	function handlePageChange(direction) {
		const currentPage = model.get(ModelProperty.PAGE);
		const newPage = Math.max(0, currentPage + direction);
		if (newPage !== currentPage) {
			model.set(ModelProperty.PAGE, newPage);
			model.save_changes();
		}
	}

	prevPage.addEventListener(Event.CLICK, () => handlePageChange(-1));
	nextPage.addEventListener(Event.CLICK, () => handlePageChange(1));

	model.on(Event.CHANGE_TABLE_HTML, () => {
		// Note: Using innerHTML can be a security risk if the content is
		// user-generated. Ensure 'table_html' is properly sanitized.
		container.innerHTML = model.get(ModelProperty.TABLE_HTML);
		updateButtonStates();
	});

	// Initial setup
	updateButtonStates();

	buttonContainer.appendChild(prevPage);
	buttonContainer.appendChild(label);
	buttonContainer.appendChild(nextPage);
	el.appendChild(container);
	el.appendChild(buttonContainer);
}

export default { render };