no-copy-frontend/src/app/ui/violations/violations-check-all-section.tsx

'use client'

import { useQuery } from '@tanstack/react-query';
import { useTranslations } from 'next-intl';
import { getViolationSearchStatus, startGlobalMonitoring } from '@/app/actions/violationActions';
import { useState } from 'react';
import ModalWindow from '@/app/components/ModalWindow';
import { fa } from 'zod/v4/locales';

export default function ViolationsCheckAllSection() {
	const {
		data: violationSearchStatus,
		isLoading,
		isError,
		error
	} = useQuery({
		queryKey: ['violationSearchStatus'],
		queryFn: () => {
			return getViolationSearchStatus();
		},
		select: (data) => {
			/* console.log(data); */
			if (data) {
				return data;
			} else {
				return null
			}
		}
	});
	const t = useTranslations('Global');
	const [isProcessing, setIsProcessing] = useState<boolean>(false);
	const [openWindow, setOpenWindow] = useState<boolean>(false);

	function openModalWindow() {
		setOpenWindow(true);
	}

	async function handlerStartMonitoring(type: 'monitoring' | 'all_files') {
		setIsProcessing(true);

		try {
			const response = await startGlobalMonitoring(type);
		} catch (error) {
			console.error(error);
		} finally {
			setIsProcessing(false);
			setOpenWindow(false);
		}
	}

	function ConfirmationModal() {
		return (
			<div className="modal-window-confirm-payment">
				<h3 className="modal-window-confirm-payment-title">
					Поиск нарушений во всех ваших изображениях
				</h3>
				<div className="modal-window-confirm-payment-price">
					<div>Варианты проверки.</div>
				</div>
				<div className="flex justify-center gap-4">
					<button
						className="btn-primary btn-cancel"
						disabled={isProcessing}
						onClick={() => {
							handlerStartMonitoring('all_files');
						}}
					>
						Проверить все
					</button>
					<button
						className="btn-primary btn-cancel"
						disabled={isProcessing}
						onClick={() => {
							handlerStartMonitoring('monitoring');
						}}
					>
						Проверить файлы с мониторингом
					</button>
				</div>
			</div>
		);
	}

	return (
		<>
			<ModalWindow state={openWindow} callBack={setOpenWindow}>
				<ConfirmationModal />
			</ModalWindow>
			<div className="violation-check-all-section">

				<div className="check-all-left">
					<div className="check-all-header">
						{/* <div className="check-all-icon">🔍</div> */}
						<div className="check-all-title">Глобальная проверка контента</div>
					</div>
					<div className="check-all-description">
						Поиск нарушений во всех ваших изображениях. Проверка только точных совпадений (95%+).
					</div>
				</div>
				<button
					type="button"
					className="check-all-btn"
					onClick={() => {
						openModalWindow()
					}}
				>
					Проверить все
				</button>
			</div>
		</>
	)
}