'use client'

import { useQuery } from '@tanstack/react-query';
import Link from 'next/link';
import { fetchLastMonitoringCheck } from '@/app/actions/monitoringActions';
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
import { useTranslations } from 'next-intl';

export default function DashboardLastCheck() {
	const { data, isLoading } = useQuery({
		queryKey: ['lastMonitoringCheck'],
		queryFn: () => {
			return fetchLastMonitoringCheck()
		},
		select: (data) => {
			if (!data) {
				return null
			}
			return data;
		},
		retry: false
	});

	const t = useTranslations('Global');

	return (
		<div className="dashboard-last-check">
			<div className="last-check-info">
				<div className="last-check-title">
					{t('last-content-check')}
				</div>
				<div
					className="relative"
				>
					{isLoading ? (
						<div
							className="loading-animation"
						>
							<div className="global-spinner"></div>
						</div>
					) : (
						<div className="last-check-date">
							{data?.recent_searches[0]?.created_at ? `${formatDate(data.recent_searches[0].created_at)} ${t('in')} ${formatDateTime(data.recent_searches[0].created_at)}` : '---'}
						</div>
					)}
				</div>
			</div>
			<div className="last-check-actions">
				<Link
					className="btn-report"
					href={'/pages/reports'}
				>
					{t('reports')}
				</Link>
{/* 				<Link
					className="btn-new-search"
					href={'violations'}
				>
					Мониторинг нарушений
				</Link> */}
			</div>
		</div>
	)
}