'use client'

import { useUserFilesTopStatistic } from '@/app/hooks/react-query/dashboard/useUserFilesTopStatistic';
import { convertBytes } from '@/app/lib/convertBytes';

export default function UsersTop() {
	const { data, isLoading, isError } = useUserFilesTopStatistic();

	if (isLoading) {
		return (
			<div className="admin-content users-top">
				<div className="content-header">
					<h3>Топ пользователей</h3>
				</div>
				<div className="content-body">
					<div>Загрузка...</div>
				</div>
			</div>
		);
	}

	if (isError) {
		return (
			<div className="admin-content users-top">
				<div className="content-header">
					<h3>Топ пользователей</h3>
				</div>
				<div className="content-body">
					<div>Ошибка при загрузке данных</div>
				</div>
			</div>
		);
	}

	return (
		<div className="admin-content users-top">
			<div className="content-header">
				<h3>Топ пользователей</h3>
			</div>
			<div className="content-body">
				<table className="admin-table">
					<thead>
						<tr>
							<th>Пользователь</th>
							<th>Файлов</th>
							<th>Размер</th>
						</tr>
					</thead>
					<tbody>
						{Array.isArray(data) && data.length > 0 ? (
							data.map((user, index) => (
								<tr key={user.user_id || index}>
									<td>
										<div className="users-top-user">{user.full_name}</div>
										<div className="users-top-mail">
											ID: {user.user_id}
										</div>
									</td>
									<td>{user.count}</td>
									<td>{convertBytes(user.files_size)}</td>
								</tr>
							))
						) : (
							<tr>
								<td colSpan={3} style={{ textAlign: 'center' }}>
									Нет данных
								</td>
							</tr>
						)}
					</tbody>
				</table>
			</div>
		</div>
	);
}