no-copy-frontend/src/app/ui/file-page/file-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, useState } from 'react';
import { formatDate } from '@/app/lib/formatDate';
import ViolationPageNote from '@/app/ui/file-page/file-page-note';

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 FilePageViolationsList({
	fileViolations,
	currentPage,
	fileId
}: {
	fileViolations: ViolationFile,
	currentPage: number,
	fileId: string
}) {
	const t = useTranslations('Global');
	const router = useRouter();
	const pathname = usePathname();
	const [selectedViolation, setSelectedViolation] = useState<ViolationFileDetail | null>(null);

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

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

	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;
	};

	function selectHandler(violation: ViolationFileDetail) {
		setSelectedViolation(violation);
	}

	return (
		<div className="block-wrapper">
			<div className="card-header">
				<h3 className="card-title">
					{t('all-file-violations')}
				</h3>
				<span>
					{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
				</span>
			</div>

			<div
				className="sources-list-wrapper"
			>
				<div className="sources-list">
					{fileViolations.violations.map(item => {
						return (
							<div
								className={`source-card ${selectedViolation?.id === item.id ? 'selected' : ''}`}
								key={item.id}
								onClick={() => {
									selectHandler(item);
								}}
							>
								{/* 								<div className="source-header">
									<div className="source-image">
										<img src={item.url} alt="" />
									</div>

								</div> */}
								<div
									className="source-header-left"
								>
									<div className="source-image">
										<img src={item.url} alt="" />
									</div>
									<div>
										<span
											className="source-meta"
										>
											{t('source')}:
										</span>
										<span className="source-url">
											{item.host}
										</span>
									</div>
								</div>

								<div
									className="source-header-right"
								>
									<span className="source-status new">
										{item.status}
									</span>

									<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>
						);
					})}
				</div>

				<div
					className="violation-info"
				>
					<div
						className="violation-info-grid"
					>
						<div
							className="violation-info-content"
						>
							<h3
								className="violation-info-title"
							>
								{selectedViolation?.page_title}
							</h3>
							<div
								className="violation-info-image"
							>
								<img src={selectedViolation?.url} alt={selectedViolation?.page_title} />
							</div>
							<div
								className="violation-info-source"
							>

								<span>
									{t('source')}:
								</span>
								<Link
									href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'}
									className="source"
									target="_blank"
									scroll={false}
								>
									{selectedViolation?.page_url}
								</Link>
							</div>
							<div
								className="violation-info-source"
							>
								<span>
									{t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'}
								</span>
							</div>
							<div>
								{selectedViolation?.status}
							</div>

							<div
								className="mt-auto"
							>
								Тут думаю нужно будет отображать инфу о работе с нарушением и её статус
							</div>

						</div>

						<div
							className="violation-info-actions"
						>
							<div className="action-buttons">
								<button type="button" className="btn-action btn-warning">
									Взять в работу
								</button>

								<button type="button" className="btn-action btn-success">
									Отметить решенным
								</button>

								<button type="button" className="btn-action btn-secondary">
									Ложное срабатывание
								</button>
							</div>
						</div>
					</div>
					{/* <ViolationPageNote /> */}
				</div>
			</div>
			{fileViolations.total_pages > 1 && (
				<div className="pagination">
					<button
						onClick={() => handlePageChange(currentPage - 1)}
						className="pagination-item pagination-item-prev"
						disabled={!fileViolations.has_previous}
					>
						{t('previous')}
					</button>

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

					<button
						onClick={() => handlePageChange(currentPage + 1)}
						className="pagination-item pagination-item-next"
						disabled={!fileViolations.has_next}
					>
						{t('next')}
					</button>
				</div>
			)}
		</div>
	);
}