'use client'

import { useTranslations } from 'next-intl';
import { convertBytes } from '@/app/lib/convertBytes';
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
import { useEffect } from 'react';
import { useViolationStatistic } from '@/app/hooks/react-query/useViolationStatistic';
import { IconDocument, IconSearch, IconWarning, IconGraph, IconDiscet, IconShield } from '@/app/ui/icons/icons';

export default function DashboardUserStats() {
	const t = useTranslations("Global");
	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
	const { data: violationStatistic, isLoading: violationStatisticLoading } = useViolationStatistic();

	return (
		<>
			<div className="dashboard-user-stats">

				<div className="stat-card projects">
					<div className="stat-header">
						<div className="stat-icon">
							<IconShield />
						</div>
					</div>
					<div className="stat-value">
						<div
							className="loading-placeholder start"
						>
							{isLoading ? (
								<div className="loading-animation">
									<div className="global-spinner" />
								</div>
							) : (
								filesInfo?.total.protected ? filesInfo?.total.protected : 0
							)}
						</div>
					</div>
					<div className="stat-label">
						{t('files-under-protection')}
					</div>
				</div>

				<div className="stat-card matches">
					<div className="stat-header">
						<div className="stat-icon">
							<IconSearch />
						</div>
					</div>
					<div className="stat-value">
						<div
							className="loading-placeholder start"
						>
							{isLoading ? (
								<div className="loading-animation">
									<div className="global-spinner" />
								</div>
							) : (
								filesInfo?.total.check ? filesInfo?.total.check : 0
							)}
						</div>
					</div>
					<div className="stat-label">
						{t('matches-found')}
					</div>
				</div>

				<div className="stat-card violations">
					<div className="stat-header">
						<div className="stat-icon">
							<IconWarning />
						</div>
					</div>
					<div className="stat-value">
						<div
							className="loading-placeholder start"
						>
							{violationStatisticLoading ? (
								<div className="loading-animation">
									<div className="global-spinner" />
								</div>
							) : (
								violationStatistic?.total_violations ?? 0
							)}
						</div>
					</div>
					<div className="stat-label">
						{t('matches')}
					</div>
				</div>

				<div className="stat-card storage">
					<div className="stat-header">
						<div className="stat-icon">
							<IconDiscet />
						</div>
					</div>
					<div className="stat-value">
						<div
							className="loading-placeholder start"
						>
							{isLoading ? (
								<div className="loading-animation">
									<div className="global-spinner" />
								</div>
							) : (
								filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0
							)}
						</div>
					</div>
					<div className="stat-label">
						{t('disk-space-used')}
					</div>
				</div>

				<div className="stat-card legal">
					<div className="stat-header">
						<div className="stat-icon">
							<IconDocument />
						</div>
					</div>
					<div className="stat-value">
						<div
							className="loading-placeholder start"
						>
							{violationStatisticLoading ? (
								<div className="loading-animation">
									<div className="global-spinner" />
								</div>
							) : (
								violationStatistic?.in_progress_violations ?? 0
							)}
						</div>
					</div>
					<div className="stat-label">
						{t('violations-in-progress')}
					</div>
				</div>
			</div>
		</>
	)
}