'use client'

import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
import { useTranslations } from 'next-intl';
import { useEffect } from 'react';
import { useViolationStatistic } from '@/app/hooks/react-query/useViolationStatistic';
import {useMonitoringStats} from '@/app/hooks/react-query/useMonitoringStats';

export default function FinalSummary() {
	const t = useTranslations('Global');
	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
	const { data: violationStatistic } = useViolationStatistic();
	const { data: monitoringStats } = useMonitoringStats();

	return (
		<div className="final-summary">
			<div className="summary-header">
				<h2 className="summary-title">
					{t('summary-statistics')} {/*  за Декабрь 2025 */}
				</h2>
				<p className="summary-subtitle">
					{t('general-indicators-of-the-protection-system')}
				</p>
			</div>
			<div className="summary-stats">
				<div className="summary-stat">
					{/* <div className="summary-stat-icon">🔍</div> */}
					<div className="summary-stat-value">
						{monitoringStats?.total_searches ? monitoringStats?.total_searches : 0}
						{/* {filesInfo?.total.check ? filesInfo?.total.check : 0} */}
						</div>
					<div className="summary-stat-label">
						{t('total-number-of-checks')}
					</div>
					{/* <div className="summary-stat-change">+15% к прошлому месяцу</div> */}
				</div>
				<div className="summary-stat center">
					{/* <div className="summary-stat-icon">🚨</div> */}
					<div>
						<div className="summary-stat-value">
							{violationStatistic?.total_violations ?? 0}
						</div>
						<div className="summary-stat-label">
							{t('violations-found')}
						</div>
					</div>
					<div>
						<div className="summary-stat-value">
							{violationStatistic?.in_progress_violations ?? 0}
						</div>
						<div className="summary-stat-label">
							{t('violations-registered')}
						</div>
					</div>

					{/* <div className="summary-stat-change">Отличный результат!</div> */}
				</div>
				<div className="summary-stat">
					{/* <div className="summary-stat-icon">🛡️</div> */}
					<div className="summary-stat-value">{filesInfo?.total.quantity ? filesInfo?.total.quantity : 0}</div>
					<div className="summary-stat-label">
						{t('protected-content')}
					</div>
					{/* <div className="summary-stat-change">+0 за период</div> */}
				</div>
			</div>
		</div>
	)
}