no-copy-frontend/src/app/ui/violations/file-page/violation-page-violations-list.tsx

// app/ui/violations/file-page/violation-page-violations-list.tsx
'use client'

import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { useRouter, usePathname } from 'next/navigation';
import { useEffect } from 'react';

interface ViolationFileDetail {
	id: number;
	url: string;
	page_url: string;
	page_title: string;
	host: string;
	status: string;
	created_date: string;
	file_id: string;
}

interface ViolationFile {
	violations: ViolationFileDetail[],
	total_elements: number,
	total_pages: number,
	current_page: number,
	page_size: number,
	has_next: boolean,
	has_previous: boolean
}

export default function ViolationPageViolationsList({
	fileViolations,
	currentPage,
	fileId
}: {
	fileViolations: ViolationFile,
	currentPage: number,
	fileId: string
}) {
	const t = useTranslations('Global');
	const router = useRouter();
	const pathname = usePathname();

	if (!fileViolations?.violations) {
		return null;
	}

	useEffect(() => {
		console.log(fileViolations);
	}, [fileViolations]);

	const handlePageChange = (page: number) => {
		router.push(`${pathname}?page=${page}`);
	};

	const getPageNumbers = () => {
		const pages = [];
		const maxVisible = 5;
		const total = fileViolations.total_pages;

		let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
		let end = Math.min(total, start + maxVisible - 1);

		if (end - start + 1 < maxVisible) {
			start = Math.max(1, end - maxVisible + 1);
		}

		for (let i = start; i <= end; i++) {
			pages.push(i);
		}

		return pages;
	};

	return (
		<div className="block-wrapper">
			<div className="card-header">
				<h3 className="card-title">
					Все нарушения этого файла
				</h3>
				<span>
					Всего: {fileViolations.total_elements} | Страница {fileViolations.current_page} из {fileViolations.total_pages}
				</span>
			</div>

			<div className="sources-list">
				{fileViolations.violations.map(item => {
					return (
						<div className="source-card" key={item.id}>
							<div className="source-image">
								<img src={item.url} alt="" />
							</div>
							<div className="source-header">
								<a href={item.page_url} target="_blank" className="source-url">
									<span>{item.page_title}</span>
								</a>
								<span className="source-status new">
									{item.status}
								</span>
							</div>
							<div className="source-meta">
								<span>{item.host}</span>
							</div>
							<div className="source-actions">
								<Link
									href={item.page_url}
									className="btn-small btn-primary-small"
									target="_blank"
									scroll={false}
								>
									{t('open')}
								</Link>
							</div>
						</div>
					);
				})}
			</div>

			{fileViolations.total_pages > 1 && (
				<div className="pagination">
					{fileViolations.has_previous && (
						<button
							onClick={() => handlePageChange(currentPage - 1)}
							className="pagination__item pagination__item--prev"
						>
							Предыдущая
						</button>
					)}

					{getPageNumbers().map(pageNum => (
						<button
							key={pageNum}
							onClick={() => handlePageChange(pageNum)}
							className={`pagination__item ${currentPage === pageNum ? 'pagination__item--active' : ''}`}
						>
							{pageNum}
						</button>
					))}

					{fileViolations.has_next && (
						<button
							onClick={() => handlePageChange(currentPage + 1)}
							className="pagination__item pagination__item--next"
						>
							Следующая
						</button>
					)}
				</div>
			)}
		</div>
	);
}