'use client'

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

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

	return (
		<div className="final-summary">
			<div className="summary-header">
				<h2 className="summary-title">
					{t('summary-statistics')}
				</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-value">
						{monitoringStats?.total_searches ? monitoringStats?.total_searches : 0}
					</div>
					<div className="summary-stat-label">
						{t('total-number-of-checks')}
					</div>
				</div>
				<div className="summary-stat center">
					<div>
						<div className="summary-stat-value">
							{violationStatistic?.total_violations ?? 0}
						</div>
						<div className="summary-stat-label">
							{t('matches-found')}
						</div>
					</div>
					<div>
						<div className="summary-stat-value">
							{violationStatistic?.total_complaints ?? 0}
						</div>
						<div className="summary-stat-label">
							{t('violations-registered')}
						</div>
					</div>
					<div>
						<div className="summary-stat-value">
							{violationStatistic?.total_law_cases ?? 0}
						</div>
						<div className="summary-stat-label">
							{t('claims-registered')}
						</div>
					</div>
				</div>
				<div className="summary-stat">
					<div className="summary-stat-value">{filesInfo?.total.quantity ? filesInfo?.total.quantity : 0}</div>
					<div className="summary-stat-label">
						{t('protected-content')}
					</div>
				</div>
			</div>
		</div>
	)
}