(() => {
	const API_URL = DSDOENV.ApiConfig.DSDO_API + "/api/v1/post/dealer";

	const tabItems = [
		{ label: "서울", value: 1 },
		{ label: "광역시", value: 2 },
		{ label: "경기", value: 3 },
		{ label: "강원", value: 4 },
		{ label: "충북", value: 5 },
		{ label: "충남", value: 6 },
		{ label: "전북", value: 7 },
		{ label: "전남", value: 8 },
		{ label: "경북", value: 9 },
		{ label: "경남", value: 10 },
		{ label: "제주", value: 11 },
	];

	let currentPage = 1;
	let selectedCategory = 1; // 초기 카테고리를 "서울"로 설정
	const itemsPerPage = 10;
	let totalPages = 0; // totalPages를 전역 변수로 설정

	const fetchDealerData = async (
		page = 1,
		size = itemsPerPage,
		category = null
	) => {
		try {
			const categoryQuery = category ? `&dealerRegion=${category}` : "";
			const response = await fetch(
				`${API_URL}?page=${page - 1}&size=${size}${categoryQuery}`,
				{
					method: "GET",
					headers: {
						"Content-Type": "application/json",
					},
				}
			);

			if (!response.ok) {
				throw new Error("API 요청 실패");
			}

			const data = await response.json();

			if (!data.totalPages) {
				console.error("API 응답에서 totalPages를 찾을 수 없습니다.");
				return null;
			}

			return data;
		} catch (error) {
			console.error("API 요청 중 오류:", error);
			return null;
		}
	};

	const renderCategoryList = () => {
		const categoryContainer = document.querySelector(".special-category-list");

		categoryContainer.innerHTML = tabItems
			.map(
				(item) =>
					`<button class="special-category-item ${
						item.value === selectedCategory ? "active" : ""
					}" data-value="${item.value}">${item.label}</button>`
			)
			.join("");
	};

	const renderTable = (content) => {
		const tableContainer = document.querySelector(".special-list-table");

		if (content.length === 0) {
			tableContainer.innerHTML = `<p>데이터가 없습니다.</p>`;
			return;
		}

		tableContainer.innerHTML = `
		  <table>
			<thead>
			  <tr>
				<th>구분</th>
				<th>특약점명</th>
				<th>연락처</th>
			  </tr>
			</thead>
			<tbody>
			  ${content
					.map(
						(item) => `
				  <tr>
					<td>${item.managementDistriction}</td>
					<td>${item.dealerName}</td>
					<td>${item.contact}</td>
				  </tr>
				`
					)
					.join("")}
			</tbody>
		  </table>
		`;
	};

	const renderPagination = () => {
		const paginationContainer = document.querySelector(".pagination");

		if (totalPages <= 1) {
			paginationContainer.innerHTML = "";
			return;
		}

		paginationContainer.innerHTML = `
	  <button class="pagination-button prev-page" ${
			currentPage === 1 ? "disabled" : ""
		}>
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" style="transform: rotate(180deg);">
		  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.58586 8.00008L4.29297 2.70718L5.70718 1.29297L12.4143 8.00008L5.70718 14.7072L4.29297 13.293L9.58586 8.00008Z" fill="${
				currentPage === 1 ? "#ccc" : "#00A9A9"
			}"/>
		</svg>
	  </button>
	  ${Array.from({ length: totalPages }, (_, index) => {
			const page = index + 1;
			return `<button class="pagination-button ${
				currentPage === page ? "active" : ""
			}" data-page="${page}">${page}</button>`;
		}).join("")}
	  <button class="pagination-button next-page" ${
			currentPage === totalPages ? "disabled" : ""
		}>
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
		  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.58586 8.00008L4.29297 2.70718L5.70718 1.29297L12.4143 8.00008L5.70718 14.7072L4.29297 13.293L9.58586 8.00008Z" fill="${
				currentPage === totalPages ? "#ccc" : "#00A9A9"
			}"/>
		</svg>
	  </button>
	`;
	};

	const loadData = async (page = 1, category = null) => {
		const data = await fetchDealerData(page, itemsPerPage, category);

		if (!data) {
			alert("데이터 로드 중 오류가 발생했습니다.");
			return;
		}

		const { content } = data;
		totalPages = data.totalPages; // totalPages를 전역 변수에 저장

		renderTable(content);
		renderPagination();
	};

	const addEventListeners = () => {
		// 카테고리 클릭 이벤트
		document
			.querySelector(".special-category-list")
			.addEventListener("click", (event) => {
				if (event.target.classList.contains("special-category-item")) {
					selectedCategory = Number(event.target.dataset.value);
					currentPage = 1;
					renderCategoryList();
					loadData(currentPage, selectedCategory);
				}
			});

		// 페이징 클릭 이벤트
		document.querySelector(".pagination").addEventListener("click", (event) => {
			const target = event.target.closest(".pagination-button");

			if (!target) return;

			if (target.classList.contains("prev-page") && currentPage > 1) {
				currentPage -= 1;
				loadData(currentPage, selectedCategory);
			} else if (
				target.classList.contains("next-page") &&
				currentPage < totalPages
			) {
				currentPage += 1;
				loadData(currentPage, selectedCategory);
			} else if (target.dataset.page) {
				const page = Number(target.dataset.page);
				if (page !== currentPage) {
					currentPage = page;
					loadData(currentPage, selectedCategory);
				}
			}
		});
	};

	const initialize = () => {
		renderCategoryList();
		loadData(currentPage, selectedCategory);
		addEventListeners();
	};

	initialize();
})();